求助：WordPress下拉菜单Tab键无障碍交互的For Loop实现

原代码存在两个核心问题：一是document.querySelector(".sub-menu")仅能选中页面中第一个子菜单，二是事件逻辑未结合焦点上下文，导致无法针对当前Tab聚焦的菜单项展开对应子菜单。以下是修正后的实现方案：

修正后的JavaScript代码 #

const menu = document.querySelector('.menu');

// 焦点进入菜单项时，展开对应子菜单
menu.addEventListener('focusin', (e) => {
  const targetMenuItem = e.target.closest('.menu-item');
  if (targetMenuItem) {
    const subMenu = targetMenuItem.querySelector('.sub-menu');
    subMenu?.style.display = 'block';
  }
});

// 焦点离开菜单项且不在其子菜单内时，关闭子菜单
menu.addEventListener('focusout', (e) => {
  const targetMenuItem = e.target.closest('.menu-item');
  if (targetMenuItem) {
    setTimeout(() => {
      if (!targetMenuItem.contains(document.activeElement)) {
        const subMenu = targetMenuItem.querySelector('.sub-menu');
        subMenu?.style.display = 'none';
      }
    }, 10);
  }
});

关键改进说明 #

• 使用焦点事件而非键盘事件：focusin/focusout更贴合无障碍场景的焦点切换逻辑，不会干扰Tab键的默认跳转行为。
• 上下文定位子菜单：通过closest('.menu-item')找到当前焦点元素所属的菜单项，确保操作的是对应子菜单而非全局第一个。
• 避免误关闭子菜单：focusout中加入延迟判断，防止焦点从父菜单项跳转到子菜单时，错误关闭下拉内容。

补充CSS（可选） #

确保子菜单默认处于隐藏状态，WordPress主题未设置时可添加：

.sub-menu {
  display: none;
}

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