您的标记有一个语法错误 - 唯一有效的直接后代 <ul>
元素是 <li>
. 。如果要嵌套列表,请在 <li>
本身:
<ul class="nav">
<li>
<a href="#">Test link</a>
<ul class="nav">
<li>Test under</li>
</ul>
</li>
</ul>
为了切换,我们只需指示搜索兄弟姐妹 <ul>
元素并应用 .slideToggle()
单击链接时的方法:
$(function() {
// Hide submenus
$(".nav ul").hide();
// Toggle nested <ul> (siblings of the link)
$(".nav > li > a").click(function(e) {
$(this).siblings("ul").slideToggle();
e.preventDefault();
});
});
这是一个演示小提琴: http://jsfiddle.net/teddyrises/2y9fz/ (添加了更多列表项目以证明效果)