使用 jQuery 实现多下拉菜单的智能开关与外部点击关闭功能

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《使用 jQuery 实现多下拉菜单的智能开关与外部点击关闭功能》，聊聊，希望可以帮助到正在努力赚钱的你。

本文详细介绍了如何使用 jQuery 实现一套健壮的多下拉菜单管理系统。核心内容包括：通过事件传播控制确保点击下拉按钮时不会触发外部关闭，同时全局监听文档点击事件以在点击下拉菜单外部时自动关闭所有已打开的菜单。此外，还涵盖了点击不同下拉菜单按钮时自动关闭其他已打开菜单的逻辑，确保页面始终保持只有一个下拉菜单处于打开状态，提升用户体验。

1. 背景与挑战

在网页设计中，经常需要实现多个独立的下拉菜单（dropdown）。用户通常期望这些下拉菜单具备以下行为：

1. 点击下拉按钮时，对应的菜单打开或关闭。
2. 当一个下拉菜单打开时，点击页面其他区域（即下拉菜单外部）应关闭所有已打开的下拉菜单。
3. 当一个下拉菜单打开时，点击另一个下拉菜单的按钮，应关闭当前已打开的菜单，并打开被点击的菜单，确保同时只有一个下拉菜单处于打开状态。

传统的实现方式可能导致一些问题，例如点击一个下拉按钮后，由于事件冒泡，外部点击监听器会立即将其关闭；或者点击另一个按钮时，出现多个下拉菜单同时打开的情况。本教程将提供一个优雅的 jQuery 解决方案来应对这些挑战。

2. 核心解决方案原理

本方案主要依赖于两个关键的 jQuery 事件处理机制：

1. 全局点击监听器 ($(document).on('click touchstart', ...)): 用于检测用户在文档任何位置的点击或触摸事件。这是实现“点击外部关闭”功能的关键。
2. 特定下拉按钮点击监听器 ($(".tm-dropdown-button").on('click', ...)): 用于处理每个下拉菜单按钮自身的点击事件，并利用 e.stopPropagation() 来阻止事件冒泡，防止其立即触发全局监听器。

通过结合这两个机制，我们可以精确控制下拉菜单的打开、关闭以及与其他菜单的交互。

3. 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>
<!-- 示例中可能包含其他CSS链接，此处仅展示核心HTML -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" /> -->

<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-lang-1">
    <span>EN</span>
  </button>
  <ul class="tm-dropdown-content" role="tooltip" id="tooltip-lang-1">
    <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-lang-2">
    <span>菜单2</span>
  </button>
  <ul class="tm-dropdown-content" role="tooltip" id="tooltip-lang-2">
    <li>选项 A</li>
    <li>选项 B</li>
    <li>选项 C</li>
  </ul>
</div>

注意： 为了提高可访问性，我们为按钮添加了 aria-describedby 属性，并将其指向对应的下拉内容 ul 的 id。role="tooltip" 也可根据实际语义调整。

4. CSS 样式

下拉菜单的显示/隐藏主要通过 CSS 类 opened 来控制。tm-dropdown-content 默认隐藏，当 tm-dropdown 容器拥有 opened 类时，其内容才显示。

/* 基础样式，确保内容默认隐藏 */
.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. 代码详解

1. 全局点击/触摸事件监听器:

   • $(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 类，从而关闭所有下拉菜单。

2. 下拉按钮点击事件监听器:

   • $(".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 操作功能，为开发者提供了一个简洁高效的实现方案。

  本篇关于《使用 jQuery 实现多下拉菜单的智能开关与外部点击关闭功能》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！