以下是基本的工作下拉菜单,子菜单将鼠标悬停在父文本上。
<script type="text/javascript">
$(document).ready(function () {
$('#nav ul').hide();
$('#nav li > a').hover(
function () {$('ul', this.parentNode).stop().slideDown(100);}
);
$('#nav li').hover(null,
function (e) {$('ul', this.parentNode).stop().slideUp(100);}
);
}
);
</script>
<ul id="nav">
<li><a href="#">Parent A</a>
<ul>
<li><a href="#">Sub a1</a>
<ul>
<li><a href="#">Item a1.1</a></li>
<li><a href="#">Item a1.2</a></li>
<li><a href="#">Item a1.3</a></li>
</ul>
</li>
<li><a href="#">Sub a2</a></li>
<li><a href="#">Sub a3</a></li>
</ul>
</li>
<li><a href="#">Parent B</a>
<ul>
<li><a href="#">Sub b1</a></li>
<li><a href="#">Sub b2</a></li>
<li><a href="#">Sub b3</a></li>
</ul>
</li>
</ul>
我在子菜单下添加了第三层以上,但它没有打开和关闭最后一层。
在这种情况下,我不确定是否需要更改 html 代码,还是只需要更改 JavaScript 才能使脚本正常工作。
最佳答案
您可以按如下方式进行:
$('#nav ul').hide();
$('#nav li > a').hover(
function () {
//show its submenu
$(this).parent().children('ul').stop().slideDown(100);
}
);
$('#nav li').hover(null,
function (e) {
//hide its submenu
$(this).children('ul').stop().slideUp(100);
}
);
查看工作demo
关于javascript - 带有悬停的下拉多级菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13810487/