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'); } );

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

使用Javascript的活动/悬停状态

2 个答案: