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;
    });
});

jquery / javascript菜单问题.siblings（）。togog（）

3 个答案: