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

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

3 个答案: