jquery/javascript 菜单问题 .siblings() .toggle()

Question

我在 jquery 中编写了一个 3 级下拉菜单，一切正常，除了当我折叠顶层时，它不会折叠第三级，即：

level 1
level 2
level 3

当我折叠它时，我得到：

level 1
level 3

什么时候应该读：

level1

我知道您可以使用 silbing 函数来执行此操作，但随后我遇到了问题，因为我也在使用切换类来根据菜单是否打开来更改朝右或朝下的箭头。它会关闭两个子菜单级别，但不会切换它们，因此当您重新打开该菜单时，箭头应该朝右时仍然朝下。

这是我的来源：

$(function() {
    $("li.level2").hide();
    $("li.level3").hide();

    $("ul.navigation").delegate(".level1", "click", function() {
        var item=$(this);
        $(this).nextUntil(".level1", ".level2", ".level3").toggle();
        $(this).toggleClass("highlight");
    });

    $("ul.navigation").delegate(".level2", "click", function() {
        var item=$(this);
        $(this).nextUntil(".level2",".level3").toggle();
        $(this).toggleClass("highlight");
    });
}); 

Jsfiddle here。基本上绿色是 1 级，橙色是 2 级，红色是菜单打开时，如果单击“代数”，然后单击“11 年”，则打开 2 个子菜单，然后再次单击代数，它不会关闭下面的子菜单11 年，当您使用 .siblings() 时，切换功能未激活，因此当您再次单击“代数”重新打开它时，会读取“11 年”，因为它尚未切换。

Answer 1

为什么不尝试嵌套 UL 呢？比如：

<ul class="level1">
    <li>level1</li>
    <li>Level1
        <ul class="level2">
            <li>Level2</li>
            <li>Level2</li>
        </ul>
    </li>
<ul>

这样您就可以隐藏和显示.children()，而不必使用nextUntil() 等。它使Javascript 更容易，并且在语义上更正确的标记。

Answer 2

试试这个：

$("ul.navigation").delegate(".level1", "click", function() {
    var item=$(this);
    $("li.level2, li.level3").hide();
    $('li.level1').removeClass('highlight');
    $(this).nextUntil(".level1", ".level2", ".level3").toggle();
    $(this).addClass("highlight");
});

http://jsfiddle.net/qM62Z/6/

Answer 3

我建议改用 div。请注意，您的类仅用于样式化 - javascript 不（也不应该）关心它们。

http://jsfiddle.net/qM62Z/8/

$(function() {
    $(".level2").hide();
    $(".level3").hide();

    $(".navigation").on("click", "div", function() {
        $(this).toggleClass("highlight").children("div").toggle();

        // prevent the event from propogating and collapsing other menus
        return false;
    });
}); ​