我有一个 jQuery 菜单,我希望能够关闭一个打开的菜单(以便所有菜单都关闭)。关闭它的唯一方法是单击打开另一个菜单,我已经工作了很长时间并且相对无处可去。有什么方法可以在不单击其他菜单的情况下关闭打开的菜单。
这是代码:
HTML
<ul id="nav">
<li> <a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a>
</li>
<li><a href="#">Sub Menu 2</a>
</li>
<li><a href="#">Sub Menu 3</a>
</li>
<li><a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li> <a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 5</a>
</li>
<li><a href="#">Sub Menu 6</a>
</li>
<li><a href="#">Sub Menu 7</a>
</li>
<li><a href="#">Sub Menu 8</a>
</li>
<li><a href="#">Sub Menu 9</a>
</li>
</ul>
</li>
<li><a href="#">Menu 3 - No Submenu</a>
</li>
<li> <a href="#">Menu 4</a>
<ul>
<li><a href="#">Sub Menu 10</a>
</li>
<li><a href="#">Sub Menu 11</a>
</li>
<li><a href="#">Sub Menu 12</a>
</li>
<li><a href="#">Sub Menu 13</a>
</li>
</ul>
</li>
<li> <a href="#">Menu 5</a>
<ul>
<li><a href="#">Sub Menu 14</a>
</li>
<li><a href="#">Sub Menu 15</a>
</li>
<li><a href="#">Sub Menu 16</a>
</li>
<li><a href="#">Sub Menu 17</a>
</li>
<li><a href="#">Sub Menu 18</a>
</li>
</ul>
</li>
jQuery
function initMenu() {
$('#nav ul').hide();
$('#nav li a').click(
function () {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
removeActiveClassFromAll();
$(this).addClass("active");
$('#nav ul:visible').slideToggle('normal');
checkElement.slideToggle('normal');
return false;
}
});
}
function removeActiveClassFromAll() {
$('#nav li a').each(function (index) {
$(this).removeClass("active");
});
}
$(document).ready(function () {initMenu();});
非常感谢任何帮助,谢谢。