使用 jQuery 实现多下拉菜单的智能开关与外部点击关闭-js教程-PHP中文网

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

本教程详细阐述了如何使用 jQuery 管理多个下拉菜单，确保在点击任一菜单按钮时，其他已打开的菜单自动关闭；同时，当用户点击下拉菜单区域外部时，所有菜单都能自动收起。核心方法包括利用事件冒泡机制、stopPropagation() 阻止事件传播以及全局点击事件监听，以实现流畅、直观的用户体验。

在现代 web 应用中，下拉菜单（dropdown menu）是常见的 ui 组件。当页面上存在多个下拉菜单时，如何优雅地管理它们的开关状态，避免多个菜单同时打开，并实现在点击菜单外部时自动关闭，是前端开发中一个常见而重要的需求。本教程将通过 jquery 提供一套简洁高效的解决方案。

HTML 结构

首先，我们需要一个清晰的 HTML 结构来表示下拉菜单。每个下拉菜单都将包含一个触发按钮和一个内容列表，并用一个共同的父容器包裹。

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

<!-- 引入 jQuery 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

登录后复制

在这个结构中：

.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');
  }
});

登录后复制

解释：

多墨智能

多墨智能 - AI 驱动的创意工作流写作工具

108

查看详情

$(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 代码整合，即可得到一个功能完整的、支持多下拉菜单智能开关和外部点击关闭的解决方案。

<!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;
            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;
        }
    </style>
</head>
<body>

    <div class="tm-dropdown">
        <button type="button" class="tm-button tm-dropdown-button">
            <span>语言选择</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-dropdown-button">
            <span>更多选项</span>
        </button>
        <ul class="tm-dropdown-content" role="tooltip">
            <li>个人资料</li>
            <li>设置</li>
            <li>退出</li>
        </ul>
    </div>

    <div class="tm-dropdown">
        <button type="button" class="tm-button tm-dropdown-button">
            <span>通知</span>
        </button>
        <ul class="tm-dropdown-content" role="tooltip">
            <li>新消息 (3)</li>
            <li>系统更新</li>
            <li>查看全部</li>
        </ul>
    </div>

    <p style="margin-top: 50px;">点击此处或任意空白区域可关闭所有下拉菜单。</p>

    <script>
        $(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');
        });
    </script>

</body>
</html>

登录后复制

注意事项与总结

事件冒泡的重要性： 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 实现多下拉菜单的智能开关与外部点击关闭的详细内容，更多请关注php中文网其它相关文章！