本文介绍一种简洁可靠的方案：利用 tabIndex 和 onBlur 事件，使多个下拉组件互斥展开——点击任一下拉触发器时，自动关闭其余已打开的下拉面板。
本文介绍一种简洁可靠的方案：利用 `tabindex` 和 `onblur` 事件，使多个下拉组件互斥展开——点击任一下拉触发器时，自动关闭其余已打开的下拉面板。
在构建多下拉菜单（如导航栏、筛选器组或设置面板）时，一个常见且关键的交互需求是：确保同一时刻仅有一个下拉处于展开状态。默认情况下，若仅依赖 onClick 切换自身开关状态，点击第二个下拉不会影响第一个已展开的下拉，导致界面出现多个重叠弹层，影响用户体验与可访问性。
解决该问题的核心思路是：将每个下拉容器变为可聚焦元素，并在其失焦（blur）时主动收起。由于浏览器原生行为中，点击页面其他可聚焦区域会触发当前聚焦元素的 blur，而点击另一个已设 tabIndex 的下拉容器，恰好会使其获得焦点、同时让前一个失去焦点——此时 onBlur 即可精准捕获并关闭它。
以下是关键实现步骤：
- 为下拉容器添加 tabIndex="0"，使其可被键盘和程序化聚焦；
- 绑定 onBlur 处理函数，在失焦时统一关闭当前下拉；
- 调用 e.stopPropagation() 防止事件冒泡干扰父级逻辑（如全局点击收起）；
- 保持 onClick 用于显式切换（如点击按钮展开/收起），不替代 onBlur 的自动管理职责。
function Dropdown({ label, children }) {
const [isOpen, setIsOpen] = useState(false);
const handleToggle = () => setIsOpen(prev => !prev);
const handleBlur = (e) => {
e.stopPropagation();
setIsOpen(false);
};
return (
<div classname="dropdown-wrapper" tabindex="0" onblur="{handleBlur}">
<button classname="dropdown-btn" onclick="{handleToggle}">
{label}
</button>
{isOpen && (
<div classname="dropdown-panel">
{children}
</div>
)}
</div>
);
}
⚠️ 注意事项：
- 不要省略 tabIndex="0"：无此属性则无法触发 blur；
- 避免对 .dropdown-panel 内部元素使用 stopPropagation()，否则可能导致面板内点击无法响应；
- 若需支持键盘导航（如 Esc 关闭、方向键操作），建议进一步集成 useEffect 监听 keydown，但本方案已满足基础互斥需求；
- 所有下拉组件应独立维护自身 isOpen 状态，由 onBlur 触发局部更新，无需全局状态协调，降低耦合度。
该方案轻量、可复用、符合无障碍标准（WCAG），且兼容 React 函数组件与主流浏览器。相比监听全局 document:click 或手动维护“当前激活ID”，它更语义化、更健壮，也更易测试与维护。
