0

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

4

3 回答 3

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 更容易，并且是语义上更正确的标记。

于 2012-06-11T14:12:20.733 回答
0

我建议改用 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;
    });
}); ​
于 2012-06-11T15:07:13.017 回答
0

尝试这个：

$("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/

于 2012-06-11T14:13:33.757 回答