JQuery - 更改 <UL> 列表中所有相似项目的属性，而不是活动项目答案

【问题标题】：JQuery - change attribute for all similar items in an <UL> list other than active itemJQuery - 更改 <UL> 列表中所有相似项目的属性，而不是活动项目
【发布时间】：2020-06-09 22:50:17
【问题描述】：

我的主要导航是一个树形菜单。

目前，用户必须手动展开和折叠树的每个部分，这在 jQuery 中通过在折叠时添加 has-sub 类和在展开时添加 menu-expanded 类来实现。

然而，我希望的行为是在单击菜单项时强制除当前展开的项之外的所有项自动折叠。我可以想到两种方法，但我不确定如何应用。

单击时分配活动菜单项menu-expanded，然后搜索具有menu-expanded 类的所有其他菜单项并设置为has-sub。我不知道如何按类属性搜索。
上下遍历树以查找同级菜单项并将除活动项之外的所有菜单项的样式设置为 has-sub。

我的代码目前如下，这是第一个子菜单项的代码，我也有第二个和第三个相应的代码（我正在将它放在一个循环中！）。

//First Child List Items
$('#cssmenu > ul > li > ul > li:has(ul)').addClass("has-sub");
$('#cssmenu > ul > li > ul > li > a').click(function() {

    sessionStorage.removeItem('secondChildMenu');

    var parentEl = $(this).parent().parent().parent();
    console.log(parentEl);
    var parentEl = parentEl.children('a').attr('id');   
    console.log(parentEl);
    saveParent(parentEl);


    let firstChildElement = $(this).attr('id');     
    var checkElement = $(this).next();      
    saveFirstChild(firstChildElement);


    $(this).closest('ul > li').addClass('active');  //Add active class

    //Element sub-menu and visible
    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {

        $(this).closest('li').removeClass('active');                
        checkElement.slideUp(100);                                  
        checkElement.closest('li').addClass("has-sub");
        checkElement.closest('li').removeClass("menu-expanded");    


    }

    //Submenu present and not visible
    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

        checkElement.slideDown(100); //Expand sub-menu
        checkElement.closest('li').removeClass("has-sub");  
        checkElement.closest('li').addClass("menu-expanded");       

    }

    if (checkElement.is('ul')) {
      return false;
    } else {
      return true;
    }
    });

如果有帮助，请查看下面的菜单。

【问题讨论】：

在您向下滑动活动菜单之前，$('li.menu-expanded').slideUp(100).removeClass('menu-expanded').addClass('has-sub'); 这应该会找到所有展开的菜单并折叠它们
谢谢，这行得通。我也没有意识到你可以在一行中组合 jQuery 调用。将其添加为答案，我将标记为已解决。

标签： jquery

【解决方案1】：

一种方法是找到所有打开的菜单，然后在您打开要打开的菜单之前关闭它们。

这可以通过以下方式完成。

// find all expanded menues, slide them up, remove the expanded class and add the sub class.

$('li.menu-expanded').slideUp(100).removeClass('menu-expanded').addClass('has-sub');

【讨论】：