Tailwind实现导航栏下拉：修复多下拉同开，附jQuery/Alpine双方案

问题根源 #

原有导航栏的通知下拉、用户中心下拉无全局状态联动，单个下拉触发展开时，未重置其他已展开下拉的状态，最终导致多菜单叠加展示。

基于jQuery的实现方案 #

实现逻辑 #

• 统一约定类名规范：所有下拉触发按钮添加dropdown-trigger类，对应下拉面板添加dropdown-panel类，使用Tailwind原生的hidden/block类控制面板展示状态
• 核心交互规则：
  • 点击触发按钮时，先重置所有下拉为收起状态，再切换当前点击项对应的下拉展示
  • 点击页面空白区域、按下ESC键时，自动全量收起所有下拉，补充基础交互体验

参考代码 #

$(document).ready(function() {
  // 配置项，可根据项目类名自定义调整
  const TRIGGER_SELECTOR = '.dropdown-trigger';
  const PANEL_SELECTOR = '.dropdown-panel';
  const HIDDEN_CLASS = 'hidden';
  const SHOW_CLASS = 'block';

  // 触发按钮点击逻辑
  $(TRIGGER_SELECTOR).on('click', function(e) {
    e.stopPropagation();
    const currentPanel = $(this).siblings(PANEL_SELECTOR);
    const isCurrentlyOpen = !currentPanel.hasClass(HIDDEN_CLASS);

    // 先全量重置所有下拉状态
    $(PANEL_SELECTOR).addClass(HIDDEN_CLASS).removeClass(SHOW_CLASS);

    // 若当前面板原本为收起状态，则展开
    if (!isCurrentlyOpen) {
      currentPanel.removeClass(HIDDEN_CLASS).addClass(SHOW_CLASS);
    }
  });

  // 点击页面空白收起所有下拉
  $(document).on('click', function() {
    $(PANEL_SELECTOR).addClass(HIDDEN_CLASS).removeClass(SHOW_CLASS);
  });

  // ESC键收起所有下拉
  $(document).on('keydown', function(e) {
    if (e.key === 'Escape') {
      $(PANEL_SELECTOR).addClass(HIDDEN_CLASS).removeClass(SHOW_CLASS);
    }
  });
});

基于Alpine.js的实现方案 #

实现逻辑 #

• 依托Alpine的声明式状态能力，在导航根节点维护单一的openDropdown状态值，记录当前展开下拉的唯一标识
• 所有下拉面板的展示状态，绑定和当前标识的匹配结果，从机制上保证同一时间只有一个下拉处于展开态，从根源上避免多下拉共存的问题
• 利用Alpine内置的@click.outside、@keydown.escape指令，零额外代码实现点击外部、按ESC收起的基础交互

参考代码 #

<!-- 导航栏根节点，挂载全局共享状态 -->
<nav x-data="{ openDropdown: null }" class="bg-white shadow">
  <div class="max-w-7xl mx-auto px-4 flex items-center justify-between h-16">
    <!-- 站点品牌与导航链接区域 -->
    <div>品牌标识</div>

    <div class="flex items-center gap-3 relative">
      <!-- 通知下拉组件 -->
      <div class="relative">
        <button
          @click="openDropdown = openDropdown === 'notification' ? null : 'notification'"
          class="p-2 rounded hover:bg-gray-100"
        >
          通知入口图标
        </button>
        <div
          x-show="openDropdown === 'notification'"
          x-transition
          class="absolute right-0 mt-2 w-56 bg-white rounded-md shadow-lg py-2"
        >
          通知列表内容
        </div>
      </div>

      <!-- 用户中心下拉组件 -->
      <div class="relative">
        <button
          @click="openDropdown = openDropdown === 'user-center' ? null : 'user-center'"
          class="p-2 rounded hover:bg-gray-100"
        >
          用户头像
        </button>
        <div
          x-show="openDropdown === 'user-center'"
          x-transition
          class="absolute right-0 mt-2 w-56 bg-white rounded-md shadow-lg py-2"
        >
          用户中心菜单内容
        </div>
      </div>

      <!-- 全局交互监听层 -->
      <div
        @click.outside="openDropdown = null"
        @keydown.escape.window="openDropdown = null"
      ></div>
    </div>
  </div>
</nav>

方案特点 #

• 无需手动遍历DOM切换类名，新增下拉组件只需给状态绑定新的唯一标识，不会出现状态不同步的问题
• 内置过渡动画、外部点击监听、键盘事件监听能力，代码量远低于jQuery实现，长期维护成本更低

内容的提问来源于stack exchange，提问作者executable