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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
/* 基础样式，确保下拉内容默认隐藏 */
.tm-dropdown-content {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  background-color: #fff;
  position: absolute; /* 使下拉内容脱离文档流 */
  z-index: 1000; /* 确保在其他内容之上 */
  min-width: 120px;
}

/* 当父容器有'opened'类时，显示下拉内容 */
.tm-dropdown.opened .tm-dropdown-content {
  display: block;
}

/* 按钮样式（可选） */
.tm-dropdown-button {
  padding: 8px 15px;
  cursor: pointer;
  border: 1px solid #007bff;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
}

.tm-dropdown-content li {
  padding: 8px 15px;
  cursor: pointer;
}

.tm-dropdown-content li:hover {
  background-color: #f0f0f0;
}

.tm-dropdown {
  position: relative; /* 确保下拉内容相对于此定位 */
  display: inline-block; /* 允许多个下拉菜单并排显示 */
  margin-right: 10px;
}
</style>

<div class="tm-dropdown">
  <button type="button" class="tm-button tm-dropdown-button">
    <span>菜单一</span>
  </button>
  <ul class="tm-dropdown-content" role="tooltip">
    <li>选项 1.1</li>
    <li>选项 1.2</li>
    <li>选项 1.3</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>选项 2.1</li>
    <li>选项 2.2</li>
    <li>选项 2.3</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.1</li>
    <li>选项 3.2</li>
    <li>选项 3.3</li>
  </ul>
</div>

$(document).ready(function() {
  // 1. 监听全局点击事件，用于关闭非目标下拉菜单
  $(document).on('click touchstart', function(e) {
    // 检查点击事件的目标是否在任何 '.tm-dropdown' 元素内部
    // 如果不在任何 '.tm-dropdown' 内部，则关闭所有已打开的下拉菜单
    if ($(e.target).closest('.tm-dropdown').length === 0) {
      $('.tm-dropdown').removeClass('opened');
    }
  });

  // 2. 监听下拉菜单按钮的点击事件
  $(".tm-dropdown-button").on('click', function(e) {
    // 阻止事件冒泡到父元素，特别是阻止它触发上面的 document 点击事件
    // 这样可以防止在点击按钮打开菜单后，document 的监听器立即将其关闭
    e.stopPropagation();

    var $this = $(this); // 当前点击的按钮
    var $parentDropdown = $this.parent('.tm-dropdown'); // 当前下拉菜单的父容器

    // 关闭所有其他已打开的下拉菜单
    // 找到所有带有 'opened' 类的 '.tm-dropdown' 元素，但排除当前点击的父容器
    $('.tm-dropdown.opened').not($parentDropdown).removeClass('opened');

    // 切换当前下拉菜单的 'opened' 类
    // 如果当前菜单是打开的，就关闭它；如果是关闭的，就打开它
    $parentDropdown.toggleClass('opened');
  });
});