Question

我有this垂直手风琴菜单，但在切换所有

时遇到一些困难

.nav li a's

来自兄弟姐妹的孩子们。

即

打开一个级别应首先关闭所有兄弟的下拉菜单。

导航工作正常，但是为了关闭'已打开的孩子'，请将我击倒。

我正在使用的Jquery是：

$(document).ready(function () {
    var ww = document.body.clientWidth; //used for something else 

        $(".toggleMenu").css("display", "inline-block");
        $(".nav li a").click(function () {

            //hide sibling's children first

            $(this).parent("li").toggleClass('hover');
        });
});

我也希望同样的建议，但是与孙子女一样（子菜单中只有一个孩子应该立即开放）。

非常感谢任何帮助/建议。

+---------------------+
|XXXXXXXXXXXXXXXXXXXXX|
+---------------------+
+---------------------+
|XXXXXXXXXXXXXXXXXXXXX|
+---------------------+
+---------------------+
|XXXXXXXXXXXXXXXXXXXXX|  <-- (parent) if i open this
+---------------------+
|                     |  
|---------------------|
|                     |
|---------------------|
|                     |
+---------------------+
|XXXXXXXXXXXXXXXXXXXXX|
+---------------------+
+---------------------+
|XXXXXXXXXXXXXXXXXXXXX|
+---------------------+
+---------------------+
|XXXXXXXXXXXXXXXXXXXXX|
+---------------------+
|                     |   <--close these children
|---------------------|
|                     |
|---------------------|
|                     |
+---------------------+
|XXXXXXXXXXXXXXXXXXXXX|
+---------------------+

+---------------------+
|XXXXXXXXXXXXXXXXXXXXX| <-- (parent)
+---------------------+
+---------------------+
|XXXXXXXXXXXXXXXXXXXXX|
+---------------------+
|ooooooooooooooooooooo| <-- (child) 
|---------------------|
|@@@@@@@@@@@@@@@@@@@@@| <-- (grandchild) when i click on this
|---------------------|
|                     | 
|---------------------|
|@@@@@@@@@@@@@@@@@@@@@| <--+ 
|---------------------|    |
|                     | <--+-- close this section
|---------------------|    |
|                     | <--+
|---------------------|
|@@@@@@@@@@@@@@@@@@@@@|
|---------------------|
|@@@@@@@@@@@@@@@@@@@@@|
+---------------------+

更新

Jsfiddle - 修复（jsfiddle光标似乎搞砸了）

Answer 1

你可以这样做：

$(document).ready(function () {
    var ww = document.body.clientWidth;

    $(".toggleMenu").css("display", "inline-block");
    $(".nav li a").click(function () {

        var thisLi = $(this).parent();

        $(this).parent("li").toggleClass('hover');

        $(".nav li").each(function(){
            if(!$(this).is(thisLi) && !$(this).find("li").is(thisLi)){
                $(this).removeClass("hover");
            }
        });

    });

});

它首先为你点击的li元素提供班级悬停，然后删除班级＆＃34; hover＆＃34;对于每个不是被点击的li元素或被点击的li元素的li元素。

使用css的多级垂直手风琴菜单

1 个答案: