本教程详细阐述了如何使用 jQuery 管理多个下拉菜单，确保在点击任一菜单按钮时，其他已打开的菜单自动关闭；同时，当用户点击下拉菜单区域外部时，所有菜单都能自动收起。核心方法包括利用事件冒泡机制、stopPropagation() 阻止事件传播以及全局点击事件监听，以实现流畅、直观的用户体验。
在现代 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 多下拉菜单管理 body { font-family: Arial, sans-serif; margin: 20px; } .tm-dropdown { position: relative; display: inline-block; margin-right: 15px; } .tm-button { padding: 10px 20px; border: 1px solid #ccc; background-color: #f0f0f0; cursor: pointer; border-radius: 5px; font-size: 16px; } .tm-button:hover { background-color: #e0e0e0; } .tm-dropdown-content { display: none; position: absolute; background-color: #fff; min-width: 180px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1000; /* 确保下拉菜单在其他内容之上 */ list-style: none; padding: 0; margin: 5px 0 0 0; /* 稍微向下偏移，与按钮保持距离 */ border-radius: 5px; border: 1px solid #ddd; } .tm-dropdown-content li { padding: 12px 15px; color: #333; cursor: pointer; font-size: 14px; } .tm-dropdown-content li:hover { background-color: #f5f5f5; } /* 当父容器有 opened 类时，显示下拉内容 */ .tm-dropdown.opened .tm-dropdown-content { display: block; }
- English
- Bahasa Melayu
- 中文简体
- 个人资料
- 设置
- 退出
- 新消息 (3)
- 系统更新
- 查看全部
点击此处或任意空白区域可关闭所有下拉菜单。
$(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) { // 阻止事件冒泡，避免触发 document 上的关闭事件 e.stopPropagation(); var $this = $(this); // 当前被点击的按钮 var $parentDropdown = $this.parent(); // 当前按钮所属的 .tm-dropdown 父容器 // 关闭所有其他已打开的下拉菜单 $('.tm-dropdown').not($parentDropdown).removeClass('opened'); // 切换当前下拉菜单的 'opened' 类（打开/关闭） $parentDropdown.toggleClass('opened'); });
注意事项与总结
事件冒泡的重要性： 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 解决方案，您可以轻松地在您的项目中实现多个下拉菜单的智能管理，提供直观且用户友好的交互体验。
以上就是使用 jQuery 实现多下拉菜单的智能开关与外部点击关闭的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526281.html
微信扫一扫 
支付宝扫一扫 
