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

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

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

1. 单击时，分配活动菜单项菜单扩展，然后使用菜单扩展类搜索所有其他菜单项，并将其设置为has-sub。 我不知道如何按类属性搜索。
2. 在树中上下遍历，查找同级菜单项，并将除活动项之外的所有菜单项的样式设置为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;
    }
    });

下面菜单的可视化（如果有用的话）。