如何实现支持键盘聚焦的隐藏菜单？解决Tab无法聚焦问题

问题描述 #

现有隐藏菜单实现：鼠标悬停时Tab键可正常切换聚焦元素，但菜单处于隐藏状态时，无法通过Tab键聚焦任何隐藏元素。要求兼容老旧浏览器，禁用:focus-within这类现代CSS特性，可接受JS降级方案（极老旧浏览器中若nth-child不生效，菜单可始终展开）。

解决方案核心思路 #

display: none会让元素完全脱离文档流，无法被键盘聚焦，因此改用**visibility: hidden + 高度/溢出控制**实现视觉隐藏，同时保留元素在Tab导航流中的位置。配合CSS选择器处理聚焦/hover时的展开，再用JS做老旧浏览器的降级兼容。

调整后的CSS代码 #

/* 默认隐藏第2个及以后的菜单项 */
.menu > .item:nth-child(n+2) {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: visibility 0s, height 0.2s, opacity 0.2s;
}

/* 鼠标悬停、菜单项聚焦时，展开所有菜单项 */
.menu:hover > .item,
.menu > .item:focus ~ .item,
.menu > .item:focus {
  visibility: visible;
  height: auto;
  overflow: visible;
  opacity: 1;
}

.item:focus {
  outline: 3px solid red;
}

HTML结构（无需修改） #

<button>Go from here</button>
<div class="menu">
  <a class="item" href="#">One</a>
  <a class="item" href="#">Two</a>
  <a class="item" href="#">Three</a>
</div>

JS降级处理（针对老旧浏览器） #

// 检测是否支持CSS :nth-child选择器
function supportsNthChild() {
  const el = document.createElement('div');
  el.style.cssText = ':nth-child(1) {}';
  return !!el.style.length;
}

// 若不支持nth-child，直接展开所有菜单项
if (!supportsNthChild()) {
  const menuItems = document.querySelectorAll('.menu > .item:nth-child(n+2)');
  menuItems.forEach(item => {
    item.style.visibility = 'visible';
    item.style.height = 'auto';
    item.style.overflow = 'visible';
    item.style.opacity = '1';
  });
}

// 额外处理：监听第一个菜单项的聚焦事件，确保老浏览器中展开菜单
const firstItem = document.querySelector('.menu > .item:first-child');
if (firstItem) {
  firstItem.addEventListener('focus', () => {
    const siblings = Array.from(firstItem.parentElement.children).slice(1);
    siblings.forEach(item => {
      item.style.visibility = 'visible';
      item.style.height = 'auto';
      item.style.overflow = 'visible';
      item.style.opacity = '1';
    });
  });
}

效果说明 #

1. 菜单隐藏状态下，Tab键可聚焦第一个菜单项，聚焦后自动展开所有后续菜单项，支持来回切换
2. 鼠标悬停菜单时，所有菜单项展开，Tab切换正常
3. 老旧浏览器（如IE8及以下）若不支持:nth-child，菜单会始终展开，保证可用性

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