【发布时间】：2015-10-28 04:20:43
【问题描述】：
我有一个包含 3 个下拉菜单的叠加菜单。
当您单击其中一个具有下拉菜单的父项时，会向子项添加一个类以“激活”下拉菜单并展开并显示。目前它工作正常，单击时，如果再次单击，则会添加和删除该类。
目前的问题是您可以同时打开所有下拉菜单。我需要做的是一次只能有一个下拉菜单处于活动状态。
如果一个下拉菜单处于活动状态，并且用户点击另一个，则原来的活动下拉菜单将关闭，而新点击的下拉菜单将变为活动状态。
此外，如果下拉菜单处于活动状态并且用户再次单击同一父项，则下拉菜单将关闭。
当前 HTML
我已排除所有其他列表项，但有下拉列表的项除外。
<ul class="header__overlay-nav">
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
After Action Review
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Overview
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Review Form
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Performance Card
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Recent Recordings
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Downloads
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
100 Day Challenge App
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Desktop Wallpapers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Screen Savers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Forms
</a>
</li>
</ul>
</li>
<li class="js-overlay-dropdown-trigger">
<a class="header__overlay-nav-links" href="#">
Inspiration
<i class="fa fa-angle-down btn__icon-right"></i>
</a>
<ul class="dropdown--overlay">
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Get Your Mojo Working
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links href="#">
Game Changers
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Bold Actions - Big Rewards
</a>
</li>
<li class="dropdown__item">
<a class="dropdown__links" href="#">
Motivational Videos
</a>
</li>
</ul>
</li>
</ul>
当前的 Jquery
这是我用来对活动类进行基本切换的原始 Jquery，基本上只是在单击触发器的子 UL 上使用 toggleClass。
注释掉了，我之前尝试删除所有活动类，然后不是在我添加的 click 元素上切换类，而是删除所有类，只是将其添加到单击的类中，因此无法通过单击关闭下拉列表再次触发相同的触发器。
var $overlayDdTrigger = $('.js-overlay-dropdown-trigger');
var $overlayClasses = {
// Active css Class for dropdowns in Main Overlay
OverlayDdActive: 'dropdown--overlay-is-active',
ButtonIconIsRotated: 'btn__icon-is-rotated',
};
$overlayDdTrigger.on('click', function() {
if (_isMobile) {
// Attempt to to remove all active classes on UL's prevents dropdown from
// being able to close if the same trigger is clicked twice
// $('ul.dropdown--overlay-is-active').removeClass($overlayClasses.OverlayDdActive);
$(this).children('ul').toggleClass($overlayClasses.OverlayDdActive);
$(this).find('.btn__icon-right').toggleClass($overlayClasses.ButtonIconIsRotated);
}
});
提前感谢您的帮助，我知道这里有很多与此问题相关的问题，我进行了大量搜索，但找不到任何可以帮助我解决此特定案例的问题。
【问题讨论】：
-
在点击处理程序中将此添加为第一行
$('.' + $overlayClasses.OverlayDdActive).removeClass($overlayClasses.OverlayDdActive); -
@Tushar 感谢您的回复，这与我注释掉的代码行本质上不一样吗？它只是删除页面上所有当前活动的类。有了这条线，就不可能通过单击同一个触发器两次来关闭下拉菜单。
-
@VinceBrown 很难分辨 HTML 中嵌套了什么，而且类过于冗长。
-
@zer00ne 所有触发器都有一个类“js-overlay-dropdown-trigger”所有下拉菜单都有一个类“dropdown--overlay”。嵌套的代码格式可能不是最好的，因为它是复制和粘贴的，但是“详细”的类只是一种偏好，对问题根本没有影响。
-
@VinceBrown 巨大的类和 id 名称的问题在于它使所有内容都无法阅读并且容易出现人为错误。有条理、简洁且语义合理的代码非常重要，尤其是当您要与他人共享时。
标签： javascript jquery html