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

Question

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

当我将鼠标悬停在父标签页上时，我的（第一个）子标签页会出现，但第二个子标签页也会出现。

这是我的 jQuery 代码。我认为问题在于，在第一个函数中，“ul.sub-menu”获取了 slideToggle，但他也为另一个“ul-sub_menu”执行了此操作。所以我认为我需要指定他只使用第一个 ul 子菜单而不是“更深”的菜单。但我不知道该怎么做？那么有人可以帮我解决这个问题吗？

我为此做了一个 jsfiddle：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

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

Working Fiddle

Answer 2

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

代码：

$(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 3

问题是

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

将应用切换到此的所有 ul.sub-menu，到任何级别。
如果您只想将其应用于第一个匹配项，您可以在选择器之后添加 .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，因为性能会更好。