移动端下拉导航失效问题排查（JavaScript、HTML、CSS）

核心问题分析 #

当前导航依赖:hover和:focus-within触发下拉，但移动端触摸设备对这两个伪类的支持存在明显差异：

• :hover仅在少数触摸设备（如Galaxy S10）上有特殊处理，多数设备不会触发该伪类
• 普通<li>元素默认无法获得焦点，导致:focus-within规则完全失效

具体修复步骤 #

1. 给父级列表项添加焦点能力

修改生成HTML的JS代码，给包含下拉菜单的<li>添加tabindex="0"，让它能接收焦点以支持:focus-within：

document.writeln(
  ` <ul>
<li><a href="../index.html">Start</a></li>
<li tabindex="0">Menu point 1<i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-right" aria-hidden="true"></i>  
  <ul class="dropdown">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</li>
<li tabindex="0">Menu point 2<i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-right" aria-hidden="true"></i>
    <ul class="dropdown">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </li>
</ul>`
);

2. 补充触摸兼容的CSS伪类

在现有触发下拉的CSS规则中添加:active伪类，覆盖触摸交互场景：

// 下拉菜单触发规则新增:active
ul li:hover > ul,
ul li:focus-within > ul,
ul li:active > ul,
ul li ul:hover,
ul li ul:focus {
   visibility: visible;
   opacity: 1;
   display: block;
   z-index: 15;
}

// 列表项交互样式同步新增:active
li:hover,
li:focus-within,
li:active {
  cursor: pointer;
  color: $color-accent-dark;

  .fa-caret-down {
    display: none;
  }

  .fa-caret-right {
    display: inline;
  }
}

3. 可选：JavaScript增强触摸兼容性

如果CSS修改仍存在兼容问题，可添加JS监听触摸事件手动控制下拉状态：

document.querySelectorAll('li[tabindex="0"]').forEach(li => {
  li.addEventListener('touchstart', function(e) {
    e.preventDefault();
    const dropdown = this.querySelector('.dropdown');
    // 切换下拉菜单显示状态
    if (dropdown.style.visibility === 'visible') {
      dropdown.style.visibility = 'hidden';
      dropdown.style.opacity = '0';
      dropdown.style.display = 'none';
    } else {
      dropdown.style.visibility = 'visible';
      dropdown.style.opacity = '1';
      dropdown.style.display = 'block';
    }
  });
});

额外优化建议 #

• 通过媒体查询调整移动端布局：将li的float改为none，设置宽度100%，避免横向溢出
• 添加点击外部关闭下拉菜单的逻辑，提升移动端用户体验

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