React Tailwind多Headless UI下拉菜单(TypeScript)单点击切换问题求助

问题根源在于每个Headless UI下拉菜单默认维护独立的展开状态：当一个下拉展开时，点击另一个下拉的触发器会先触发当前下拉的「外部点击关闭」逻辑，而新下拉的「打开」事件会被这次点击消耗掉，导致需要第二次点击才能打开新下拉。

要实现单次点击切换，核心是用全局共享状态统一控制所有下拉的展开状态，具体实现如下：

React 实现示例 #

import { useState } from 'react';
import { Dropdown } from '@headlessui/react';

function MultiDropdownExample() {
  // 用null表示无下拉展开，存储当前展开的下拉唯一标识
  const [activeDropdown, setActiveDropdown] = useState(null);

  // 处理下拉触发器点击逻辑
  const toggleDropdown = (dropdownId) => {
    // 点击已展开的下拉则关闭，否则切换到目标下拉
    setActiveDropdown(prev => prev === dropdownId ? null : dropdownId);
  };

  return (
    <div className="flex gap-4 p-4">
      {/* 第一个下拉菜单 */}
      <Dropdown 
        open={activeDropdown === 'dropdown-1'} 
        onOpenChange={(isOpen) => setActiveDropdown(isOpen ? 'dropdown-1' : null)}
      >
        <Dropdown.Button onClick={() => toggleDropdown('dropdown-1')}>
          菜单1
        </Dropdown.Button>
        <Dropdown.Menu className="bg-white shadow-md rounded-md p-2">
          <Dropdown.Item className="px-4 py-2 hover:bg-gray-100">选项1-1</Dropdown.Item>
          <Dropdown.Item className="px-4 py-2 hover:bg-gray-100">选项1-2</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>

      {/* 第二个下拉菜单 */}
      <Dropdown 
        open={activeDropdown === 'dropdown-2'} 
        onOpenChange={(isOpen) => setActiveDropdown(isOpen ? 'dropdown-2' : null)}
      >
        <Dropdown.Button onClick={() => toggleDropdown('dropdown-2')}>
          菜单2
        </Dropdown.Button>
        <Dropdown.Menu className="bg-white shadow-md rounded-md p-2">
          <Dropdown.Item className="px-4 py-2 hover:bg-gray-100">选项2-1</Dropdown.Item>
          <Dropdown.Item className="px-4 py-2 hover:bg-gray-100">选项2-2</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

export default MultiDropdownExample;

Vue 实现示例 #

<template>
  <div class="flex gap-4 p-4">
    <!-- 第一个下拉菜单 -->
    <Dropdown 
      :open="activeDropdown === 'dropdown-1'" 
      @open-change="(isOpen) => activeDropdown = isOpen ? 'dropdown-1' : null"
    >
      <DropdownButton @click="toggleDropdown('dropdown-1')">
        菜单1
      </DropdownButton>
      <DropdownMenu class="bg-white shadow-md rounded-md p-2">
        <DropdownItem class="px-4 py-2 hover:bg-gray-100">选项1-1</DropdownItem>
        <DropdownItem class="px-4 py-2 hover:bg-gray-100">选项1-2</DropdownItem>
      </DropdownMenu>
    </Dropdown>

    <!-- 第二个下拉菜单 -->
    <Dropdown 
      :open="activeDropdown === 'dropdown-2'" 
      @open-change="(isOpen) => activeDropdown = isOpen ? 'dropdown-2' : null"
    >
      <DropdownButton @click="toggleDropdown('dropdown-2')">
        菜单2
      </DropdownButton>
      <DropdownMenu class="bg-white shadow-md rounded-md p-2">
        <DropdownItem class="px-4 py-2 hover:bg-gray-100">选项2-1</DropdownItem>
        <DropdownItem class="px-4 py-2 hover:bg-gray-100">选项2-2</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Dropdown, DropdownButton, DropdownMenu, DropdownItem } from '@headlessui/vue';

const activeDropdown = ref(null);

const toggleDropdown = (dropdownId) => {
  activeDropdown.value = activeDropdown.value === dropdownId ? null : dropdownId;
};
</script>

逻辑说明 #

1. 全局状态管理：用activeDropdown变量记录当前展开的下拉ID，确保同一时间只有一个下拉处于展开状态
2. 点击切换逻辑：点击触发器时，直接切换全局状态到目标下拉ID——如果目标下拉未展开则打开，已展开则关闭
3. 状态同步：结合组件的onOpenChange（React）/open-change（Vue）事件，确保点击外部关闭下拉时，全局状态也能同步更新

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