0

这是我的小提琴链接，其中包含代码...我的问题是一级中的下拉菜单有效，但第二级下拉菜单不起作用...当我将光标从元素上移开并取走时，它不会消失到菜单中的第二项..

在此处输入图像描述

怎么了？我的HTML如下

<div id="menu">
    <ul class="topnav">
        <li><a href="#">Live-Radio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">Songs</a>
            <ul class="subnav">
                <li>
                    <a href="#">Sub Nav Link</a>
                    <ul class="subnav2">
                        <li><a href="#">Sub21a</a></li>
                        <li><a href="#">Sub22a</a></li>
                    </ul>                 
                </li>
                <li><a href="#">Sub Nav Link</a></li>
            </ul>
        </li>
    </ul>
</div>

我想要这种下拉菜单的 html 标记。您可以在链接中查看详细代码.....这是一些我认为从代码中提取的 jquery 有问题（但不知道它是什么）......

JS：

//for my second subnav menu

$(this).parent().find("ul.subnav").hover(function() {
    $(this).find("li ul.subnav2").slideDown('fast').show(); //Drop down the subnav2 on hover
} , function () {
    $(this).find("li ul.subnav2").slideUp('fast'); //Drop down the subnav2 on hover
});
4

1 回答 1

2

您只需要定位具有子元素的lis ：.subnav2

    $(this).parent().find("ul.subnav").find('li ul.subnav2').parent().hover(function() {
        $(this).children("ul.subnav2").slideDown('fast').show(); //Drop down the subnav2 on hover
    } , function () {
        $(this).children("ul.subnav2").slideUp('fast'); //Drop down the subnav2 on hover
    });

演示：http: //jsfiddle.net/ehNrE/14/

在旁注中，.parent().find(...)与 相同.siblings(...)。此外，如果您删除标签名称，选择器的执行速度也会更快（保留标签名称的唯一原因是如果您只需要选择某种标签类型，因为多个标签类型具有相同的类，或者您需要支持 Internet Explorer 5.5）。

ul.subnav将更改为.subnav.

于 2012-01-02T11:27:52.290 回答