Here is my fiddle link其中有代码...我的问题是一级下拉菜单有效,但二级下拉菜单不...当我将光标从元素上移开并转到第二个元素时,它不会消失菜单..
怎么了?我的 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
});
最佳答案
您只需要将具有 .subnav2
元素的 li
作为子元素:
$(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
。
关于jquery - 悬停时的双层下拉菜单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8700144/