使用Javascript的活动/悬停状态

Question

我正在为正在处理的手风琴样式菜单的活动状态编写代码而感到困难。 我已经将鼠标悬停在适当的位置，单击时菜单将保持打开状态，但是，在用户单击鼠标并将鼠标移出菜单后，我失去了样式。

我希望样式保持不变，直到单击下一项，依此类推。

我在这里工作的示例： http : //codepen.io/Sektion66/pen/dviJG

谢谢！

Answer 1

单击标题时，可以使用toggleClass为其提供一个类。 然后，您就像已经在使用CSS一样。 您只需单击鼠标即可设置样式，而无需悬停设置样式。

$(document).ready(function() {
    $("ul.dd-header").click(function() {
        var $el = $(this).find('ul.hidden');
        var $opened = $('.toggledDown').not($el);
        $opened.toggleClass('toggledDown');
        $opened.slideToggle();
        $el.toggleClass('toggledDown');
        $el.slideToggle();
        $(this).toggleClass('toggleHeader');
    });
});

CSS：

.toggleHeader{
    border-left: 10px solid @blue;
    background-color: #000;

}

Answer 2

基本上，您想切换在元素上定义所选元素的类。

$('dd-main').click(function () { $('.selected').removeClass('selected'); $(this).addClass('selected'); } );

这将从所有其他选定元素中删除样式，然后将该类添加到单击的新元素中