jQuery下拉菜单也显示孩子的孩子

Question

我在Wordpress中有这个jQuery下拉菜单，我有一个父菜单选项卡，然后一个子菜单选项卡，然后一个子菜单选项卡。

当我在父选项卡上悬停时，我的(第一个)子选项卡会出现，但第二个子选项卡也会出现。

这是我的jQuery代码。我认为问题在于，在de first函数中，“ul.子菜单”获取slideToggle，但他也是为另一个“ul子菜单”这样做的。所以我想我需要说明他只接受第一个ul子菜单，而不是“更深的”菜单。但我不知道该怎么做？有人能帮我吗？

我为此做了个小摆设：http://jsfiddle.net/6jKn7/

$(document).ready(function(e) {
    $("#header_inner .menu-header-container ul li").hover(function() {
        $(this).find("a").toggleClass('hover');
        $("ul.sub-menu", this).slideToggle(50);
    });

    $("#header_inner .menu-header-container ul li ul li").hover(function() {
        $("ul.sub-menu", this).slideToggle(50);
    });
});

Answer 1

您可以尝试显示/隐藏当前元素及其同级元素的后代。

代码：

$(document).ready(function (e) {
    $("#header_inner .menu-header-container ul li").hover(function () {
        $(this).find("a").toggleClass('hover');
        $(this).siblings().children(".sub-menu").hide();
        $(this).children(".sub-menu").slideToggle(50);        
    });
});

演示：http://jsfiddle.net/b64sK/

Answer 2

对于嵌套ul，您应该使用不同的类。使用$("ul.sub-menu")也会影响作为子菜单的内部dom。

工频

Answer 3

问题是

$("ul.sub-menu", this)  

将“应用”切换到此的所有ul.子菜单，到任何级别。

如果只想将其应用于第一个匹配项，则可以在选择器之后添加.first。

$(document).ready(function (e) {
    $("#header_inner .menu-header-container ul li").hover(function () {
        $(this).find("a").toggleClass('hover');
        $("ul.sub-menu", this).first().slideToggle(50); //here
    });

    $("#header_inner .menu-header-container ul li ul li").hover(function () {
        $("ul.sub-menu", this).slideToggle(50);
    });
});  

这将解决问题，但我认为最好的解决方案是为每个子菜单级别创建不同的类。

总的来说，我肯定会使用纯CSS而不是jQuery来实现这一点，因为性能会更好。