为 3 级手风琴菜单添加背景答案

【问题标题】：add background to 3 level accordion menu为 3 级手风琴菜单添加背景
【发布时间】：2013-11-28 19:51:50
【问题描述】：

我想为活动菜单添加背景。

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

这是我的代码

$('.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的链接

也许有人可以帮忙。谢谢

【问题讨论】：

标签： jquery menu jquery-ui-accordion

【解决方案1】：

只需添加这个：

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

而不是

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

Fiddle here

【讨论】：

这将为所有父级添加活动类，包括导航、正文和其他包装器
是的，将返回上一个答案。
你试过了吗？ jsfiddle.net/ru7ge/6如果你点击最里面的孩子，它会从最高的里移除红色
只是比较我们的 Fiddle 并没有发现差异
点击“研究单位”>点击“研究新闻和事件”>点击任何孩子，除此之外，您的代码还会从用户点击的任何项目向 3 个父母添加活动

【解决方案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/

【讨论】：