Question

我想在活动菜单中添加背景。

所以如果我点击第一级我得到背景，但是当我点击第二级时，第一级背景是隐藏的，我想保持这个显示。

这是我的代码

$('.sidenav li:has(ul)').addClass("has-sub");
$('.sidenav').find('.has-sub').find('a:first').addClass("sub");
$('.sidenav ul ul').addClass("sub-menu");
$(".sub-menu").hide();

$('.sidenav li a').click( function() {
    var checkElement = $(this).next(); 

    $('.sidenav li').removeClass('active');
    $(this).closest('li').addClass('active'); 

    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
        return false;
    }

    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('.sidenav ul:visible').not(checkElement.parentsUntil('.sidenav')).slideUp('normal');
        checkElement.slideDown('normal');
        return false;
    }
});

这里是JSfiddle

的链接

也许有人可以提供帮助。感谢

Answer 1

只需添加：

$(this).parentsUntil(".sidenav").addClass('active');

而不是

$(this).closest('li').addClass('active');

Fiddle here

Answer 2

您可以查看您点击的项目

if( $(this).parent().hasClass('top') ) {
    $('.sidenav li').removeClass('active');
} else {
    $('.sidenav li:not(.top)').removeClass('active');
}

并将顶级课程添加到顶级项目

<li class="top"><a href="#">Research Units</a>....

http://jsfiddle.net/ru7ge/5/

添加背景到3级手风琴菜单

2 个答案: