我有一个使用hide和slidetoggle功能的下拉菜单。我无法设置它，以便在打开一个菜单项时关闭当前菜单项。我有一个JSFiddle来显示我的位置。
$('.menu-hide').hide();
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
e.preventDefault();
$(this).next('.menu-hide').slideToggle('fast');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fat_nav">
<ul class="nav-l1">
<li class="nav-l1-menuitem nav-l1-web_design">
<a class="nav-top clickme" href="#">Web Design <span class="submenu-icon"> </span></a>
<ul class="nav_drop menu-hide">
<li>
<a href="self-storage-websites.php"><span>Self Storage Websites</span></a>
</li>
<li>
<a href="responsive.php"><span>Responsive Design</span></a>
</li>
<!--<li>
<a href="optimization.php"><img class="hero_image" src="assets/images/opti.png" /><span>Website Optimization</span></a>
</li>-->
<li>
<a href="software-integration.php"><span>Software Integration</span></a>
</li>
</ul>
</li>
<li class="nav-l1-menuitem nav-l1-marketing">
<a class="nav-top clickme" href="#">Internet Marketing<span class="submenu-icon"> </span></a>
<ul class="nav_drop menu-hide">
<li>
<a href="seo.php"><span>Real SEO</span></a>
</li>
<li>
<a href="paid-search.php"><span>PPC (Pay Per Click) Ads</span></a>
</li>
<li>
<a href="social-media-marketing.php"><span>Social Media Marketing</span></a>
</li>
<!--<li>
<a href="#"><img class="hero_image" src="assets/images/rep.png" /><span>Reputation Mgmt.</span></a>
</li>-->
</ul>
</li>
<li class="nav-l1-menuitem nav-l1-about">
<a class="nav-top clickme" href="#">About Us<span class="submenu-icon"> </span></a>
<ul class="nav_drop menu-hide">
<li>
<a href="about.php"><span>About M4S</span></a>
</li>
<li>
<a href="careers.php"><span>Careers</span></a>
</li>
<li>
<a href="contact.php"><span>Contact Us</span></a>
</li>
</ul>
</li>
<li class="nav_button">
<a class="nav-top last-nav-link" href="request-a-quote.php">Free Quote</a>
</li>
</ul>
</div>
<!-- END OF FAT NAV -->
任何帮助都将不胜感激。
答案 0 :(得分：1)
无需遍历a标记，只需向其添加事件监听器，点击a标记后，隐藏所有.menu_hide即可，然后显示其子项。< / p>
您最初可以使用css来隐藏.menu-hide，而不是等待js加载。
$('.clickme').on('click', function(e) {
e.preventDefault();
if(!$(this).next('.menu-hide').is(':visible'))
{
$('.menu-hide').hide(500);
$(this).next('.menu-hide').slideToggle('fast');
}
});.menu-hide
{
display:none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fat_nav">
<ul class="nav-l1">
<li class="nav-l1-menuitem nav-l1-web_design">
<a class="nav-top clickme" href="#">Web Design <span class="submenu-icon"> </span></a>
<ul class="nav_drop menu-hide">
<li>
<a href="self-storage-websites.php"><span>Self Storage Websites</span></a>
</li>
<li>
<a href="responsive.php"><span>Responsive Design</span></a>
</li>
<!--<li>
<a href="optimization.php"><img class="hero_image" src="assets/images/opti.png" /><span>Website Optimization</span></a>
</li>-->
<li>
<a href="software-integration.php"><span>Software Integration</span></a>
</li>
</ul>
</li>
<li class="nav-l1-menuitem nav-l1-marketing">
<a class="nav-top clickme" href="#">Internet Marketing<span class="submenu-icon"> </span></a>
<ul class="nav_drop menu-hide">
<li>
<a href="seo.php"><span>Real SEO</span></a>
</li>
<li>
<a href="paid-search.php"><span>PPC (Pay Per Click) Ads</span></a>
</li>
<li>
<a href="social-media-marketing.php"><span>Social Media Marketing</span></a>
</li>
<!--<li>
<a href="#"><img class="hero_image" src="assets/images/rep.png" /><span>Reputation Mgmt.</span></a>
</li>-->
</ul>
</li>
<li class="nav-l1-menuitem nav-l1-about">
<a class="nav-top clickme" href="#">About Us<span class="submenu-icon"> </span></a>
<ul class="nav_drop menu-hide">
<li>
<a href="about.php"><span>About M4S</span></a>
</li>
<li>
<a href="careers.php"><span>Careers</span></a>
</li>
<li>
<a href="contact.php"><span>Contact Us</span></a>
</li>
</ul>
</li>
<li class="nav_button">
<a class="nav-top last-nav-link" href="request-a-quote.php">Free Quote</a>
</li>
</ul>
</div>
<!-- END OF FAT NAV -->