我已经尝试了几个小时,因为我对jQuery本身还很陌生,而且我绝对还是一个初学者,所以我真的需要一些帮助。我试图创建一个带有子菜单的导航。一切都按预期工作,但我错过了停止子菜单列表项切换的方法。
HTML:
<nav>
<ul id="site-nav">
<li><a href="#">Main Nav Item 1</a></li>
<li><a href="#">Main Nav Item 2 (with submenu)</a>
<ul>
<li><a href="#">Submenu Item 1</a></li>
<li><a href="#">Submenu Item 2</a></li>
<li><a href="#">Submenu Item 3</a></li>
</ul>
</li>
<li><a href="#">Main Nav Item 3 (with submenu)</a>
<ul>
<li><a href="#">Submenu Item 1</a></li>
<li><a href="#">Submenu Item 2</a></li>
</ul>
</li>
<li><a href="#">Main Nav Item 4</a></li>
<li><a href="#">Main Nav Item 5</a></li>
</ul>
</nav>
JQuery(子菜单部分):
$(document).ready(function() {
var subnavArrow = ['<div id="subnavArrow"></div>'];
subpull = $('header nav ul li');
submenu = $('header nav ul li ul');
submenuitems = $('header nav ul li ul li');
subpull.has('ul').prepend(subnavArrow);
$('header nav ul li').has('ul').click(function() {
$(this).children('ul').toggle('slow');
});
});
如果您不明白我的意思,我会尽可能详细地解释一下:
我想每次单击“主导航项2”时打开其子项。这个功能正常工作,我也可以将其关闭,但是如果我单击“主导航项2”的某个子菜单项,它将关闭“主导航项2”的子菜单。