核心目标：独立控制下拉菜单的显示与隐藏
状态管理与事件触发
在前端开发中，多个下拉菜单需要具备独立的开关状态。aria-expanded 属性用于反映当前显示状态，初始值设为 false，点击时切换为 true 或回到 false，从而驱动显示与隐藏。
每个下拉都应单独绑定事件，确保一个菜单的显示不会直接影响其他菜单。为此，可以在每个容器内寻找按钮和菜单元素，并为按钮绑定独立的事件处理函数。
// 示例：核心思想
document.querySelectorAll('[data-dropdown]').forEach(container => {const btn = container.querySelector('[data-toggle]');const menu = container.querySelector('[data-menu]');btn.addEventListener('click', (e) => {e.stopPropagation();const expanded = btn.getAttribute('aria-expanded') === 'true';btn.setAttribute('aria-expanded', String(!expanded));menu.style.display = !expanded ? 'block' : 'none';});// 点击菜单外部关闭document.addEventListener('click', (ev) => {if (!container.contains(ev.target)) {btn.setAttribute('aria-expanded', 'false');menu.style.display = 'none';}});
});
无冲突显示策略
实现独立控制多个下拉菜单的显示与隐藏时，允许同时打开多个菜单，但也提供统一的“外部点击关闭”行为，避免界面过于杂乱。通过为每个容器维护自己的 状态开关，可以在相同页面中实现多处独立开关，而不必强行互斥。
在交互设计层面，建议将打开状态和可见性绑定在同一路径上，例如通过 aria-expanded 与一个控制显示的 CSS 类或属性，确保无障碍性与视觉反馈的一致性。
页面结构与交互设计
DOM 结构与选择器
为了实现独立控制，推荐为每一个下拉菜单使用一个容器元素，并在容器内放置一个触发按钮和一个菜单面板。通过 data-dropdown、data-toggle 与 data-menu 三个标识符，使选择器具可维护性与扩展性。
这样的结构便于在同一页面中拷贝多份相同的下拉组件，而不需要对全局逻辑造成影响，同时也方便后续的无障碍增强和键盘导航实现。
<div class="dropdown" data-dropdown><button class="trigger" data-toggle aria-expanded="false" aria-controls="menu1">菜单 1</button><ul id="menu1" data-menu role="menu" hidden><li>选项 A</li><li>选项 B</li><li>选项 C</li></ul>
</div>
可访问性与键盘控制
为了提升可访问性，除了鼠标点击触发，还需要支持键盘操作。常用的键盘交互包括：Enter、Space 可打开/切换，ArrowDown 聚焦并打开，Escape 关闭，aria-expanded 同步更新。
通过在触发按钮上监听键盘事件，可以实现无障碍的下拉操作与快速导航，确保使用辅助技术的用户也能顺利与控件交互。
// 键盘导航与可访问性
document.querySelectorAll('[data-dropdown]').forEach(container => {const btn = container.querySelector('[data-toggle]');const menu = container.querySelector('[data-menu]');btn.addEventListener('keydown', (e) => {if (['ArrowDown', 'Enter', ' '].includes(e.key)) {e.preventDefault();btn.setAttribute('aria-expanded', 'true');menu.style.display = 'block';} else if (e.key === 'Escape') {btn.setAttribute('aria-expanded', 'false');menu.style.display = 'none';}});
});
实现思路与步骤
实现示例：独立控制的核心函数
将独立控制的逻辑模块化，可以更方便地在项目中复用。通过一个核心函数初始化每一个下拉容器，既能保证行为一致性，又能保持模块化的代码结构。
核心函数 接受一个容器节点，绑定按钮与菜单的事件处理，支持独立的开启与关闭逻辑，并可扩展为更复杂的交互模式。
// 核心函数：为任意容器初始化
function initDropdown(container) {const btn = container.querySelector('[data-toggle]');const menu = container.querySelector('[data-menu]');btn.addEventListener('click', (e) => {e.stopPropagation();const open = btn.getAttribute('aria-expanded') === 'true';btn.setAttribute('aria-expanded', String(!open));menu.style.display = !open ? 'block' : 'none';});
}
document.querySelectorAll('[data-dropdown]').forEach(initDropdown);
代码演练：多下拉菜单的独立切换
以下示例展示如何在同一页面中初始化多个下拉组件，并确保彼此独立控制显示与隐藏。每个下拉都具有自己的开关状态，互不干扰。
页面中存在多个容器时，直接对所有容器执行相同的初始化逻辑即可实现“独立控制”的需求。
<div class="dropdown" data-dropdown><button data-toggle aria-expanded="false" aria-controls="menu1">菜单 1</button><ul id="menu1" data-menu hidden> ... </ul>
</div>
<div class="dropdown" data-dropdown><button data-toggle aria-expanded="false" aria-controls="menu2">菜单 2</button><ul id="menu2" data-menu hidden> ... </ul>
</div><script>// 直接应用核心初始化逻辑document.querySelectorAll('[data-dropdown]').forEach(container => {const btn = container.querySelector('[data-toggle]');const menu = container.querySelector('[data-menu]');btn.addEventListener('click', () => {const open = btn.getAttribute('aria-expanded') === 'true';btn.setAttribute('aria-expanded', String(!open));menu.style.display = !open ? 'block' : 'none';});});
</script>
