jQuery 实现智能下拉菜单：全局关闭与独立切换机制-js教程-PHP中文网

jQuery 实现智能下拉菜单：全局关闭与独立切换机制

本文详细介绍了如何使用 jQuery 构建一套智能下拉菜单系统，实现点击菜单外部区域或切换到其他菜单时，当前打开的下拉菜单能自动关闭。通过事件委托和阻止事件冒泡机制，确保了多个下拉菜单的独立性与协同工作，提供了清晰的JavaScript、HTML及CSS代码示例，帮助开发者轻松实现这一常见UI交互。

一、引言：多下拉菜单管理的挑战

在现代web应用中，下拉菜单（dropdown menu）是一种常见的ui组件，用于提供导航、筛选或设置选项。当页面上存在多个下拉菜单时，如何有效地管理它们的开启与关闭状态成为一个关键问题。理想的用户体验是：

点击任何一个下拉菜单按钮，该菜单应正确地打开或关闭。
当一个菜单打开时，点击页面上的其他区域（即菜单外部），该菜单应自动关闭。
当一个菜单打开时，点击另一个下拉菜单的按钮，当前打开的菜单应关闭，同时被点击的菜单应打开。

本教程将通过 jQuery 演示如何优雅地实现这些功能，确保多个下拉菜单的独立性与协同工作。

二、核心原理与实现策略

实现上述功能主要依赖于以下两个核心机制：

全局事件监听与事件委托： 在 document 对象上监听点击事件，用于判断用户是否点击了下拉菜单之外的区域。如果点击目标不在任何下拉菜单内部，则关闭所有已打开的下拉菜单。
阻止事件冒泡 (e.stopPropagation())： 当点击下拉菜单按钮时，阻止该点击事件向上冒泡到 document 监听器，从而避免了在打开或切换菜单时，立即触发全局关闭逻辑。
精确控制类名： 通过添加或移除特定的CSS类（如 opened），来控制下拉菜单的显示与隐藏状态。

三、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>

<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">
    <span>EN</span>
  </button>
  <ul class="tm-dropdown-content" role="tooltip">
    <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">
    <span>EN</span>
  </button>
  <ul class="tm-dropdown-content" role="tooltip">
    <li>English</li>
    <li>Bahasa Melayu</li>
    <li>中文简体</li>
  </ul>
</div>

登录后复制

结构说明：

tm-dropdown：每个下拉菜单的根容器，用于标识一个独立的下拉组件。
tm-dropdown-button：触发下拉菜单的按钮。
tm-dropdown-content：下拉菜单的实际内容，通常是一个 <ul> 列表。
aria-describedby 和 role="tooltip"：这些属性有助于提升组件的可访问性（Accessibility），方便屏幕阅读器用户理解其功能。

四、CSS 样式

为了控制下拉菜单的显示与隐藏，我们需要一些基本的CSS样式。当 .tm-dropdown 元素具有 opened 类时，其子元素 .tm-dropdown-content 应该显示。

.tm-dropdown-content {
  display: none; /* 默认隐藏 */
  list-style: none; /* 移除列表默认样式 */
  padding: 0;
  margin: 0;
  position: absolute; /* 根据需要调整定位 */
  background-color: #fff; /* 示例背景色 */
  border: 1px solid #ddd; /* 示例边框 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 示例阴影 */
  z-index: 1000; /* 确保下拉菜单在其他内容之上 */
}

.tm-dropdown.opened .tm-dropdown-content {
  display: block; /* 当父元素有 'opened' 类时显示 */
}

/* 示例：为按钮和列表项添加一些基础样式 */
.tm-dropdown {
  position: relative; /* 使下拉内容能够相对定位 */
  display: inline-block; /* 确保多个下拉菜单并排显示 */
  margin-right: 10px;
}
.tm-dropdown-button {
  padding: 8px 15px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 4px;
}
.tm-dropdown-content li {
  padding: 8px 15px;
  cursor: pointer;
}
.tm-dropdown-content li:hover {
  background-color: #f5f5f5;
}

登录后复制

样式说明：

.tm-dropdown-content 默认 display: none; 隐藏。
当 .tm-dropdown 元素被添加 opened 类时，通过 .tm-dropdown.opened .tm-dropdown-content 选择器使其 display: block; 显示。
position: relative; 在 .tm-dropdown 上是必要的，以便下拉内容 position: absolute; 时能相对于其父容器定位。

五、JavaScript 逻辑

现在是实现核心交互逻辑的部分。我们将使用 jQuery 来处理事件。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

$(document).on('click touchstart', function(e) {
  // 1. 全局点击处理：点击下拉菜单外部区域时关闭所有已打开的下拉菜单
  // 检查点击事件的目标元素或其任何祖先元素是否是 '.tm-dropdown'
  // 如果不是，则表示点击发生在任何下拉菜单之外
  if ($(e.target).closest('.tm-dropdown').length === 0) {
    $('.tm-dropdown').removeClass('opened'); // 移除所有下拉菜单的 'opened' 类
  }
});

$(".tm-dropdown-button").on('click', function(e) {
  // 2. 下拉按钮点击处理：切换当前下拉菜单，并关闭其他已打开的下拉菜单
  e.stopPropagation(); // 阻止事件冒泡，防止触发 document 上的全局点击处理

  var $this = $(this); // 获取当前被点击的按钮
  var parent = $this.parent(); // 获取当前按钮的父级 '.tm-dropdown' 元素

  // 关闭所有其他已打开的下拉菜单
  // 查找所有 '.tm-dropdown' 元素，并排除当前点击的父元素，然后移除它们的 'opened' 类
  $('.tm-dropdown').not(parent).removeClass('opened');

  // 切换当前点击的下拉菜单的状态
  // 如果当前下拉菜单已打开，则关闭；如果已关闭，则打开
  parent.toggleClass('opened');
});

登录后复制

代码解析：

$(document).on('click touchstart', function(e) { ... });
- 这是一个全局事件监听器，绑定到整个 document 对象上，监听 click 和 touchstart 事件（为了兼容触屏设备）。
- $(e.target).closest('.tm-dropdown').length === 0：这是判断点击是否发生在下拉菜单外部的关键。
  - e.target 是实际被点击的DOM元素。
  - $(e.target).closest('.tm-dropdown') 会从 e.target 向上遍历DOM树，查找最近的 .tm-dropdown 祖先元素。
  - .length === 0 表示没有找到 .tm-dropdown 祖先元素，即点击发生在任何下拉菜单之外。
- 如果点击在外部，$('.tm-dropdown').removeClass('opened'); 会将所有具有 opened 类的 .tm-dropdown 元素关闭。
$(".tm-dropdown-button").on('click', function(e) { ... });
- 这个监听器只针对所有 .tm-dropdown-button 元素。
- e.stopPropagation();：这是至关重要的一步。当点击下拉按钮时，这个事件会向上冒泡。如果没有 stopPropagation()，它会立即触发 document 上的全局点击处理，导致下拉菜单刚打开就被关闭，或者无法正确切换。阻止冒泡确保了只有这个特定的处理函数来管理当前下拉菜单的状态。
- var parent = $this.parent();：获取当前点击按钮的直接父元素，即对应的 .tm-dropdown 容器。
- $('.tm-dropdown').not(parent).removeClass('opened');：这行代码实现了“当一个菜单打开时，关闭其他所有菜单”的功能。它选择所有 .tm-dropdown 元素，然后使用 .not(parent) 排除当前正在操作的下拉菜单，最后移除其余所有菜单的 opened 类。
- parent.toggleClass('opened');：这是切换当前下拉菜单状态的简洁方式。如果 parent 元素有 opened 类，则移除它（关闭菜单）；如果没有，则添加它（打开菜单）。

六、完整示例代码

将上述HTML、CSS和JavaScript整合在一起，你将得到一个功能完善的多下拉菜单系统。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 智能下拉菜单</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        .tm-dropdown {
            position: relative; /* 使下拉内容能够相对定位 */
            display: inline-block; /* 确保多个下拉菜单并排显示 */
            margin-right: 15px;
            vertical-align: top; /* 保持对齐 */
        }

        .tm-dropdown-button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background-color: #fff;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
            color: #333;
            transition: all 0.2s ease;
        }

        .tm-dropdown-button:hover {
            background-color: #e9e9e9;
            border-color: #bbb;
        }

        .tm-dropdown-content {
            display: none; /* 默认隐藏 */
            position: absolute;
            top: 100%; /* 定位在按钮下方 */
            left: 0;
            background-color: #fff;
            min-width: 160px;
            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;
            overflow: hidden; /* 确保圆角效果 */
        }

        .tm-dropdown.opened .tm-dropdown-content {
            display: block; /* 当父元素有 'opened' 类时显示 */
        }

        .tm-dropdown-content li {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .tm-dropdown-content li:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>

    <h1>智能下拉菜单示例</h1>
    <p>点击下拉菜单按钮打开/关闭，点击其他下拉菜单按钮会关闭当前打开的并打开新的，点击菜单外部区域会关闭所有菜单。</p>

    <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="tooltip1">
            <span>语言</span>
        </button>
        <ul class="tm-dropdown-content" role="tooltip" id="tooltip1">
            <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="tooltip2">
            <span>设置</span>
        </button>
        <ul class="tm-dropdown-content" role="tooltip" id="tooltip2">
            <li>个人资料</li>
            <li>账户安全</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="tooltip3">
            <span>帮助</span>
        </button>
        <ul class="tm-dropdown-content" role="tooltip" id="tooltip3">
            <li>常见问题</li>
            <li>联系我们</li>
            <li>用户手册</li>
        </ul>
    </div>

    <script>
        $(document).on('click touchstart', function(e) {
            if ($(e.target).closest('.tm-dropdown').length === 0) {
                $('.tm-dropdown').removeClass('opened');
            }
        });

        $(".tm-dropdown-button").on('click', function(e) {
            e.stopPropagation();
            var $this = $(this);
            var parent = $this.parent();

            $('.tm-dropdown').not(parent).removeClass('opened');
            parent.toggleClass('opened');
        });
    </script>

</body>
</html>

登录后复制

七、注意事项与扩展

可访问性（Accessibility）： 在HTML结构中，我们使用了 aria-describedby 和 role="tooltip"。为了更好的可访问性，可以进一步增强，例如在菜单打开时设置 aria-expanded="true"，关闭时设置为 false。
动画效果： 当前的 display: none/block 切换是瞬时的。如果需要平滑的动画效果，可以考虑使用 CSS opacity 和 visibility 配合 transition 属性，或者 jQuery 的 slideToggle()、fadeIn()/fadeOut() 方法。例如，将CSS中的 display: none/block 替换为：
```
.tm-dropdown-content {
  /* ... 其他样式 ... */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.tm-dropdown.opened .tm-dropdown-content {
  opacity: 1;
  visibility: visible;
}
```
登录后复制
事件类型： click 和 touchstart 同时监听是为了更好地支持桌面和移动设备。在某些特定场景下，可能需要根据设备类型进行更细致的事件处理。
性能优化： 对于页面上存在大量下拉菜单的情况，jQuery 的事件委托机制已经相对高效。如果遇到性能瓶颈，可以考虑使用原生JavaScript或者更轻量级的库来优化。
菜单内容交互： 如果下拉菜单内容内部的元素也需要响应点击事件（例如点击列表项进行跳转），这些点击事件默认也会冒泡。如果它们不应该触发全局关闭，可能需要在这些内部元素的点击事件中也使用 e.stopPropagation()。