javascript - jquery/javascript 菜单问题

Question

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

    $("ul.navigation").delegate("li.level1", "click", function() {
        $("li.level2").toggle().siblings("li.level3").hide();;
    });

    $("ul.navigation").delegate("li.level2", "click", function() {
        $("li.level3").toggle();
    });
});

我正在使用这个脚本在 jquery 中为我的页面制作一个下拉菜单，但是目前当你点击一个 level1 列表时它会打开每个 level1，而我只想打开被点击的那个。 IE。当我点击第一个时，它正在这样做:

1

    2

1

    2

当我想让它这样做的时候

1

    2

1

我知道你可以使用 $this 函数只打开所选的那个，但我不确定如何实现它以及每当我尝试 (this).next 它只打开下一个时

我包含了一个带有样式的事件页面，以便于理解:http://jsfiddle.net/K6TSv/1045/

感谢您的帮助，这一直是我的动力。

Answer 1

使用 $(this) 获取点击的项目，然后获取下一个 level2 项目并显示。

$("ul.navigation").delegate("li.level1", "click", function() {
    var item=$(this);
    item.next(".level2").toggle();      
});

jsfiddle 示例:http://jsfiddle.net/K6TSv/1046/

如果我这样做。我会创建一个分层的 HTML 标记来处理这个问题，这将使事情变得简单

编辑:根据评论(标记已更改!!!)

如果你想根据一些选择标准来选择元素unl some element，使用nextUntil功能。

$(this).nextUntil(".level1",".level2").toggle();

样本 http://jsfiddle.net/K6TSv/1072/