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

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

HTML 结构

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

  
    EN
  
  

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

解释：

有道智云AI开放平台

有道智云AI开放平台

下载

• $(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 按钮的点击事件。当一个按钮被点击时，我们需要完成两件事：

1. 关闭所有其他已打开的下拉菜单。
2. 切换当前被点击按钮所属的下拉菜单的开关状态。

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

    
    
    
    
    



    

        
            语言选择
        
        

            
English
            
Bahasa Melayu
            
中文简体
        
    

    

        
            更多选项
        
        

            
个人资料
            
设置
            
退出
        
    

    

        
            通知
        
        

            
新消息 (3)
            
系统更新
            
查看全部
        
    

    
点击此处或任意空白区域可关闭所有下拉菜单。

    

注意事项与总结

• 事件冒泡的重要性： 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 解决方案，您可以轻松地在您的项目中实现多个下拉菜单的智能管理，提供直观且用户友好的交互体验。