1. 背景与挑战
在网页设计中，经常需要实现多个独立的下拉菜单（dropdown）。用户通常期望这些下拉菜单具备以下行为：
- 点击下拉按钮时，对应的菜单打开或关闭。
- 当一个下拉菜单打开时，点击页面其他区域（即下拉菜单外部）应关闭所有已打开的下拉菜单。
- 当一个下拉菜单打开时，点击另一个下拉菜单的按钮，应关闭当前已打开的菜单，并打开被点击的菜单，确保同时只有一个下拉菜单处于打开状态。
传统的实现方式可能导致一些问题，例如点击一个下拉按钮后，由于事件冒泡，外部点击监听器会立即将其关闭；或者点击另一个按钮时，出现多个下拉菜单同时打开的情况。本教程将提供一个优雅的 jQuery 解决方案来应对这些挑战。
2. 核心解决方案原理
本方案主要依赖于两个关键的 jQuery 事件处理机制：
- 全局点击监听器 ($(document).on('click touchstart', ...)): 用于检测用户在文档任何位置的点击或触摸事件。这是实现“点击外部关闭”功能的关键。
- 特定下拉按钮点击监听器 ($(".tm-dropdown-button").on('click', ...)): 用于处理每个下拉菜单按钮自身的点击事件，并利用 e.stopPropagation() 来阻止事件冒泡，防止其立即触发全局监听器。
通过结合这两个机制，我们可以精确控制下拉菜单的打开、关闭以及与其他菜单的交互。
3. HTML 结构
为了实现可复用和模块化的下拉菜单，我们采用统一的 HTML 结构。每个下拉菜单都包含一个 tm-dropdown 容器，一个 tm-dropdown-button 触发器，以及一个 tm-dropdown-content 列表。
- English
- Bahasa Melayu
- 中文简体
- 选项 A
- 选项 B
- 选项 C
注意： 为了提高可访问性，我们为按钮添加了 aria-describedby 属性，并将其指向对应的下拉内容 ul 的 id。role="tooltip" 也可根据实际语义调整。
4. CSS 样式
下拉菜单的显示/隐藏主要通过 CSS 类 opened 来控制。tm-dropdown-content 默认隐藏，当 tm-dropdown 容器拥有 opened 类时，其内容才显示。
Codapp 扫码点餐小程序(含H5系统)
下载
Codapp 外卖点餐系统是一款专为快餐店、奶茶店、咖啡店、糕点店等商户打造的移动点餐解决方案，支持自提与外卖两种模式，可快速部署上线使用。 该系统支持微信、支付宝支付，并接入腾讯地图与百度地图，支持第三方配送（如达达）与商家自主配送，助力门店实现智能点单与订单管理。 功能特点： 微信小程序&H5移动端双端点餐：无需下载 App，直接扫码下单 支持多门店管理：一套系统可管理多家门
/* 基础样式，确保内容默认隐藏 */
.tm-dropdown-content {
display: none;
/* 可以添加其他样式，如定位、背景、阴影等 */
position: absolute; /* 如果需要下拉菜单浮动 */
background-color: #fff;
border: 1px solid #ccc;
list-style: none;
padding: 5px 0;
margin: 0;
z-index: 1000; /* 确保下拉菜单在其他内容之上 */
}
/* 当父级 tm-dropdown 具有 opened 类时，显示内容 */
.tm-dropdown.opened .tm-dropdown-content {
display: block;
}
/* 其他可能的样式，例如定位 */
.tm-dropdown {
position: relative; /* 使下拉内容可以相对于此定位 */
display: inline-block; /* 确保多个下拉菜单并排显示 */
}说明：
- .tm-dropdown-content 默认 display: none; 隐藏。
- .tm-dropdown.opened .tm-dropdown-content 设置 display: block; 来显示内容。
- position: relative 在 .tm-dropdown 上是必要的，以便下拉内容可以使用 position: absolute 进行定位。
5. JavaScript (jQuery) 逻辑
这是实现所有功能的关键部分。
$(document).on('click touchstart', function(e) {
// 全局点击监听器：当点击事件发生在任何 .tm-dropdown 外部时，关闭所有已打开的下拉菜单。
// $(e.target).closest('.tm-dropdown') 会查找点击目标元素及其祖先元素中最近的 .tm-dropdown。
// 如果找不到（即 .length === 0），说明点击发生在任何下拉菜单外部。
if ($(e.target).closest('.tm-dropdown').length === 0) {
$('.tm-dropdown').removeClass('opened');
}
});
$(".tm-dropdown-button").on('click', function(e) {
// 阻止事件冒泡：
// 这一步至关重要。如果没有它，点击下拉按钮会冒泡到 document，
// 立即触发上面的全局监听器，导致下拉菜单刚打开就被关闭。
e.stopPropagation();
var $this = $(this); // 当前被点击的按钮
var parent = $this.parent(); // 当前按钮的父元素，即 .tm-dropdown 容器
// 关闭所有其他已打开的下拉菜单：
// 找到所有 .tm-dropdown 元素，然后排除当前点击按钮的父元素，
// 对剩余的元素移除 'opened' 类。
$('.tm-dropdown').not(parent).removeClass('opened');
// 切换当前下拉菜单的打开/关闭状态：
// 如果当前下拉菜单已打开，则关闭它；否则，打开它。
if (parent.hasClass('opened')) {
parent.removeClass('opened');
} else {
parent.addClass('opened');
}
});6. 代码详解
-
全局点击/触摸事件监听器:
- $(document).on('click touchstart', function(e) { ... });：在 document 上绑定 click 和 touchstart 事件，以兼容鼠标和触摸设备。
- $(e.target).closest('.tm-dropdown').length === 0：这是判断点击是否发生在下拉菜单外部的核心逻辑。
- e.target 是实际被点击的 DOM 元素。
- .closest('.tm-dropdown') 从 e.target 向上遍历其祖先元素，直到找到第一个匹配 .tm-dropdown 的元素。
- 如果 closest() 方法没有找到匹配的元素，它会返回一个空的 jQuery 对象，此时其 length 属性为 0。这意味着点击发生在任何 .tm-dropdown 容器之外。
- $('.tm-dropdown').removeClass('opened');：如果点击在外部，则移除所有 .tm-dropdown 上的 opened 类，从而关闭所有下拉菜单。
-
下拉按钮点击事件监听器:
- $(".tm-dropdown-button").on('click', function(e) { ... });：为所有带有 tm-dropdown-button 类的按钮绑定点击事件。
- e.stopPropagation();：这是防止事件冒泡的关键。当点击下拉按钮时，这个事件会被阻止向上冒泡到 document，因此不会立即触发全局监听器，导致下拉菜单被错误关闭。
- var $this = $(this);：获取当前被点击的按钮的 jQuery 对象。
- var parent = $this.parent();：获取当前按钮的父元素，即 tm-dropdown 容器。
- $('.tm-dropdown').not(parent).removeClass('opened');：这一行代码实现了“点击另一个下拉菜单时关闭其他菜单”的功能。它选择所有 .tm-dropdown 元素，然后使用 .not(parent) 排除掉当前被点击按钮的父级下拉菜单，最后对剩余的下拉菜单移除 opened 类。
- if (parent.hasClass('opened')) { ... } else { ... }：这是标准的切换逻辑。检查当前下拉菜单是否已打开，然后相应地添加或移除 opened 类。
7. 注意事项与最佳实践
-
语义化 HTML: 尽可能使用语义化的 HTML 标签和 ARIA 属性，以提高可访问性。例如，使用
- 和
- 来表示列表，为按钮添加 aria-haspopup="true" 和 aria-expanded 属性等。
- CSS 过渡效果: 如果需要更平滑的打开/关闭动画，可以在 CSS 中为 tm-dropdown-content 添加 transition 属性，配合 opacity 或 max-height 等属性进行动画效果。
- 性能优化: 对于有大量下拉菜单的页面，事件委托 ($(document).on('click', '.tm-dropdown-button', function() { ... });) 是一种更高效的方式，因为它只绑定了一个事件处理程序到 document，而不是为每个按钮绑定一个。本教程已采用此模式的变体（全局监听器）。
- 移动端兼容性: touchstart 事件的加入确保了在触摸设备上的良好用户体验。
- 避免 ID 选择器: 教程中使用了类选择器 (.tm-dropdown, .tm-dropdown-button)，这使得代码更具通用性和可复用性，避免了 ID 冲突问题。
8. 总结
通过上述 jQuery 解决方案，我们成功地实现了一个功能完善且用户友好的多下拉菜单系统。该系统能够智能地管理多个下拉菜单的打开和关闭状态，确保在任何时候只有一个下拉菜单可见，并能在用户点击菜单外部时自动关闭所有菜单。这种方法利用了 jQuery 强大的事件处理能力和 DOM 操作功能，为开发者提供了一个简洁高效的实现方案。
