在现代Web应用中，下拉菜单（Dropdown Menu）是一种常见的UI组件，用于展示更多选项或导航。然而，当页面上存在多个下拉菜单时，如何有效地管理它们的开启与关闭状态，确保用户体验的流畅性和逻辑性，是一个需要解决的关键问题。具体来说，我们希望实现以下功能：
- 点击菜单外部区域时，所有已打开的下拉菜单自动关闭。
- 点击一个下拉菜单按钮打开其内容时，其他已打开的下拉菜单应自动关闭，确保每次只有一个菜单处于打开状态。
- 解决方案应具有通用性，通过类名应用于多个下拉菜单实例。
本文将提供一个基于jQuery的简洁而强大的解决方案，满足上述所有需求。
核心实现思路
为了实现上述功能，我们将利用jQuery的事件委托机制和事件冒泡特性。主要思路包括：
- 全局点击监听器： 在document上绑定一个全局点击事件，用于检测用户是否点击了下拉菜单外部。
- 按钮点击监听器： 为每个下拉菜单的触发按钮绑定点击事件，用于切换当前菜单的状态，并在此之前关闭所有其他已打开的菜单。
- 事件传播控制： 利用e.stopPropagation()阻止事件冒泡，防止按钮点击事件被全局点击监听器误判为外部点击。
HTML 结构
首先，我们需要一个清晰的HTML结构来表示下拉菜单。每个下拉菜单都应该有一个包裹元素（例如tm-dropdown），一个触发按钮（tm-dropdown-button），以及一个包含菜单内容的元素（tm-dropdown-content）。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="tm-dropdown">
<button type="button" class="tm-button tm-button-primary-l6 tm-button-ghost text-grey-medium tm-dropdown-button" aria-describedby="tooltip">
<span>EN</span>
</button>
<ul class="tm-dropdown-content" role="tooltip">
<li>English</li>
<li>Bahasa Melayu</li>
<li>中文简体</li>
</ul>
</div>
<div class="tm-dropdown">
<button type="button" class="tm-button tm-button-primary-l6 tm-button-ghost text-grey-medium tm-dropdown-button" aria-describedby="tooltip">
<span>EN</span>
</button>
<ul class="tm-dropdown-content" role="tooltip">
<li>English</li>
<li>Bahasa Melayu</li>
<li>中文简体</li>
</ul>
</div>结构说明：
- tm-dropdown：作为单个下拉菜单的容器，我们通过为其添加或移除opened类来控制菜单的显示状态。
- tm-dropdown-button：触发下拉菜单打开/关闭的按钮。
- tm-dropdown-content：下拉菜单的实际内容，默认隐藏。
CSS 样式
为了控制下拉菜单内容的显示与隐藏，我们需要一些基本的CSS样式。当tm-dropdown元素拥有opened类时，其内部的tm-dropdown-content将显示。
.tm-dropdown-content {
display: none; /* 默认隐藏 */
list-style: none;
padding: 0;
margin: 0;
position: absolute; /* 根据需要调整定位 */
/* 其他样式如背景、边框、阴影等 */
}
.tm-dropdown.opened .tm-dropdown-content {
display: block; /* 当父元素有opened类时显示 */
}样式说明：
- display: none; 默认隐藏下拉内容。
- display: block; 当.tm-dropdown元素被添加opened类时，显示其内容。
- 可以根据设计需求添加其他样式，如定位、背景、阴影、动画等。
JavaScript 逻辑 (jQuery)
现在，我们来实现核心的jQuery逻辑。
$(document).on('click touchstart', function(e) {
// 当点击文档的任何位置时，检查点击目标是否在任何一个下拉菜单内部
// 如果点击目标不在任何 '.tm-dropdown' 元素及其子元素内部，则关闭所有已打开的下拉菜单
if ($(e.target).closest('.tm-dropdown').length === 0) {
$('.tm-dropdown').removeClass('opened');
}
});
$(".tm-dropdown-button").on('click', function(e) {
e.stopPropagation(); // 阻止事件冒泡，防止点击按钮时立即触发 document 上的点击事件
var $this = $(this); // 当前被点击的按钮
var parent = $this.parent(); // 当前按钮的父级，即 .tm-dropdown 容器
// 关闭所有其他已打开的下拉菜单，除了当前点击的这个
// 使用 .not(parent) 排除当前下拉菜单
$('.tm-dropdown').not(parent).removeClass('opened');
// 切换当前点击的下拉菜单的打开/关闭状态
if (parent.hasClass('opened')) {
parent.removeClass('opened');
} else {
parent.addClass('opened');
}
});逻辑详解
-
全局点击事件 ($(document).on('click touchstart', ...)):
- 此事件监听器绑定在document对象上，意味着无论用户点击页面的哪个位置，都会触发此函数。
- touchstart事件的添加是为了更好地兼容移动设备。
- $(e.target).closest('.tm-dropdown').length === 0 是判断点击是否发生在下拉菜单外部的关键。
- e.target 获取实际被点击的DOM元素。
- $(e.target).closest('.tm-dropdown') 向上遍历DOM树，查找最近的.tm-dropdown祖先元素。
- 如果找不到这样的祖先元素（即length为0），则说明点击发生在任何.tm-dropdown元素之外。
- 在这种情况下，$('.tm-dropdown').removeClass('opened'); 会移除所有下拉菜单的opened类，从而关闭所有已打开的菜单。
-
下拉菜单按钮点击事件 ($(".tm-dropdown-button").on('click', ...)):
- 此事件监听器绑定在所有带有tm-dropdown-button类的元素上。
- e.stopPropagation(); 是一个非常重要的步骤。它阻止了当前点击事件继续向上冒泡到document。如果没有这一行，当用户点击下拉菜单按钮时，document上的全局点击事件也会被触发，并可能立即关闭刚刚打开的菜单，导致菜单闪烁或无法打开。
- var parent = $this.parent(); 获取当前被点击按钮的父级tm-dropdown元素。
- $('.tm-dropdown').not(parent).removeClass('opened'); 这一行实现了“打开一个关闭其他”的功能。它选择所有tm-dropdown元素，然后使用.not(parent)方法排除掉当前正在操作的下拉菜单，最后移除其余所有菜单的opened类。
- 最后，通过检查parent.hasClass('opened')来判断当前下拉菜单的状态，然后添加或移除opened类，从而切换其显示状态。
注意事项与最佳实践
- 事件委托 (.on()): 使用$(document).on(...)进行事件委托是一个好习惯，特别是在处理动态添加的DOM元素时。它确保了即使下拉菜单是通过JavaScript动态创建的，其事件监听器也能正常工作。
- 移动设备兼容性: 添加touchstart事件确保了在触摸屏设备上也能正常响应。
- 语义化HTML和ARIA属性: 在HTML结构中，使用role="tooltip"和aria-describedby="tooltip"等ARIA属性有助于提升可访问性，使屏幕阅读器能够更好地理解组件的功能。
-
CSS动画: 如果需要更平滑的过渡效果，可以在CSS中使用transition属性结合opacity和visibility来替代简单的display: block/none切换。例如：
.tm-dropdown-content { /* ... 其他样式 ... */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .tm-dropdown.opened .tm-dropdown-content { opacity: 1; visibility: visible; } - 性能考量: 对于大量下拉菜单的场景，此方案通常表现良好。jQuery的选择器和DOM操作效率较高。
总结
通过结合jQuery的事件委托、事件冒泡控制以及简单的CSS类切换，我们成功构建了一个功能完善的多下拉菜单管理系统。该系统能够智能地处理外部点击关闭和互斥打开的逻辑，极大地提升了用户界面的交互体验和可维护性。这种模式不仅适用于下拉菜单，也可推广到其他需要类似行为的UI组件，如模态框、通知面板等。
