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

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《使用 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学习网公众号！