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

时间:2013-12-23 13:26:44

标签: jquery drop-down-menu

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

3 个答案:

答案 0 :(得分:1)

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

<强> Working Fiddle

答案 1 :(得分:0)

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

代码:

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

答案 2 :(得分:0)

问题在于

$("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,因为性能会更好。