在现代 web 应用中，下拉菜单（dropdown menu）是常见的 ui 组件。当页面上存在多个下拉菜单时，如何优雅地管理它们的开关状态，避免多个菜单同时打开，并实现在点击菜单外部时自动关闭，是前端开发中一个常见而重要的需求。本教程将通过 jquery 提供一套简洁高效的解决方案。
HTML 结构
首先，我们需要一个清晰的 HTML 结构来表示下拉菜单。每个下拉菜单都将包含一个触发按钮和一个内容列表，并用一个共同的父容器包裹。
- English
- Bahasa Melayu
- 中文简体
- 选项A
- 选项B
- 选项C
在这个结构中：
- .tm-dropdown 是每个下拉菜单的容器。
- .tm-dropdown-button 是触发下拉菜单的按钮。
- .tm-dropdown-content 是下拉菜单实际显示的内容列表。
CSS 样式
为了控制下拉菜单的显示与隐藏，我们将使用 CSS 类来切换其可见性。.opened 类将用于显示下拉菜单内容。
.tm-dropdown {
position: relative; /* 确保下拉内容定位正确 */
display: inline-block; /* 允许多个下拉菜单并排显示 */
margin-right: 10px;
}
.tm-dropdown-content {
display: none; /* 默认隐藏 */
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
list-style: none;
padding: 0;
margin: 0;
border-radius: 4px;
}
.tm-dropdown-content li {
padding: 12px 16px;
text-decoration: none;
display: block;
color: black;
cursor: pointer;
}
.tm-dropdown-content li:hover {
background-color: #f1f1f1;
}
/* 当父容器有 opened 类时，显示下拉内容 */
.tm-dropdown.opened .tm-dropdown-content {
display: block;
}
/* 示例按钮样式 */
.tm-button {
padding: 8px 15px;
border: 1px solid #ccc;
background-color: #eee;
cursor: pointer;
border-radius: 4px;
}jQuery 逻辑实现
核心的交互逻辑将通过 jQuery 实现，主要包含两个部分：全局点击事件处理和下拉按钮点击事件处理。
1. 全局点击事件处理：关闭外部点击的菜单
我们首先监听 document 上的 click 或 touchstart 事件。当用户点击页面任何位置时，此事件都会触发。我们的目标是，如果点击发生在任何 .tm-dropdown 区域之外，则关闭所有已打开的下拉菜单。
$(document).on('click touchstart', function(e) {
// 检查点击事件的目标元素是否在任何 .tm-dropdown 内部
// .closest('.tm-dropdown') 会从 e.target 向上查找最近的 .tm-dropdown 父元素
// 如果找不到（即点击在任何 .tm-dropdown 外部），则长度为 0
if ($(e.target).closest('.tm-dropdown').length === 0) {
// 关闭所有已打开的下拉菜单
$('.tm-dropdown').removeClass('opened');
}
});解释：
- $(document).on('click touchstart', ...): 绑定点击和触摸开始事件到整个文档，以兼容移动设备。
- $(e.target).closest('.tm-dropdown').length === 0: 这是判断点击是否发生在下拉菜单外部的关键。e.target 是实际被点击的元素。closest('.tm-dropdown') 会从 e.target 开始，向上遍历 DOM 树，查找第一个匹配 .tm-dropdown 选择器的祖先元素。如果找不到，则返回一个空的 jQuery 对象，其 length 属性为 0。
- $('.tm-dropdown').removeClass('opened'): 如果点击发生在下拉菜单外部，则移除所有 .tm-dropdown 元素上的 opened 类，从而关闭所有已打开的菜单。
2. 下拉按钮点击事件处理：切换当前菜单并关闭其他菜单
接下来，我们监听所有 .tm-dropdown-button 按钮的点击事件。当一个按钮被点击时，我们需要完成两件事：
- 关闭所有其他已打开的下拉菜单。
- 切换当前被点击按钮所属的下拉菜单的开关状态。
$(".tm-dropdown-button").on('click', function(e) {
// 阻止事件冒泡到 document，防止全局点击事件立即关闭当前打开的菜单
e.stopPropagation();
var $this = $(this); // 当前被点击的按钮
var $parentDropdown = $this.parent(); // 当前按钮所属的 .tm-dropdown 父容器
// 关闭所有其他已打开的下拉菜单
// .not($parentDropdown) 确保不关闭当前正在操作的菜单
$('.tm-dropdown').not($parentDropdown).removeClass('opened');
// 切换当前下拉菜单的 'opened' 类
// 如果当前菜单已打开，则关闭；如果已关闭，则打开
$parentDropdown.toggleClass('opened');
});解释：
- e.stopPropagation(): 这是至关重要的一步。当点击下拉菜单按钮时，该事件会从按钮元素向上冒泡到其父元素，最终到达 document。如果没有 stopPropagation()，document 上的全局点击事件会立即触发，并根据其逻辑判断点击发生在 .tm-dropdown 内部（因为按钮是其一部分），但在其外部（因为按钮本身不是 .tm-dropdown），这可能导致下拉菜单刚打开就被立即关闭，或者产生意外行为。stopPropagation() 阻止了事件继续向上冒泡，确保只有当前按钮的点击逻辑被执行，而不会立即触发 document 上的关闭逻辑。
- var $parentDropdown = $this.parent(): 获取当前点击按钮的直接父元素，即 .tm-dropdown 容器。
- $('.tm-dropdown').not($parentDropdown).removeClass('opened'): 这一行代码实现了“当一个菜单打开时，关闭所有其他菜单”的功能。它选择所有 .tm-dropdown 元素，然后使用 .not() 方法排除当前正在操作的 $parentDropdown，最后移除这些非当前菜单的 opened 类。
- $parentDropdown.toggleClass('opened'): 这是一个便捷的方法，用于切换元素的类。如果元素有 opened 类，就移除它；如果没有，就添加它。这使得点击同一个按钮可以打开和关闭对应的下拉菜单。
完整示例代码
将 HTML、CSS 和 jQuery 代码整合，即可得到一个功能完整的、支持多下拉菜单智能开关和外部点击关闭的解决方案。
jQuery 多下拉菜单管理
- English
- Bahasa Melayu
- 中文简体
- 个人资料
- 设置
- 退出
- 新消息 (3)
- 系统更新
- 查看全部
点击此处或任意空白区域可关闭所有下拉菜单。
注意事项与总结
- 事件冒泡的重要性： e.stopPropagation() 在处理嵌套事件时至关重要。理解事件流（捕获、目标、冒泡）有助于编写更健壮的 JavaScript 代码。
- closest() 方法： jQuery.closest() 是一个非常有用的方法，用于查找元素的最近祖先，这比 parents() 更高效，因为它在找到第一个匹配项后就会停止查找。
- not() 方法： jQuery.not() 允许从匹配元素集合中排除特定元素，这在处理“除了当前元素之外的所有元素”的场景中非常方便。
- CSS 动画： 如果需要更平滑的过渡效果，可以在 .tm-dropdown-content 和 .tm-dropdown.opened .tm-dropdown-content 之间添加 CSS transition 属性，例如 transition: opacity 0.3s ease, transform 0.3s ease;，并使用 opacity 和 visibility 属性来控制显示和隐藏，而不是直接使用 display: none/block。
- 可访问性（Accessibility）： 在实际项目中，应考虑为下拉菜单添加 WAI-ARIA 属性，如 aria-haspopup、aria-expanded、aria-controls 等，以提升屏幕阅读器用户的体验。
通过上述 jQuery 解决方案，您可以轻松地在您的项目中实现多个下拉菜单的智能管理，提供直观且用户友好的交互体验。
