纯CSS单页导航点击链接后隐藏菜单的实现求助

我懂你的困扰——想用<label>包裹<ul>来触发关闭菜单的单选按钮，结果链接抢走了点击事件，导致事件没法传递到父级<label>。这是因为浏览器对链接点击的处理优先级很高，就算事件能冒泡，有时候也不会触发<label>的单选按钮切换行为。

这里有两个实用的纯CSS解决方案，你可以根据需求选：

方案一：给每个链接套上关闭菜单的<label> #

这是兼容性最好的方法，不用依赖新CSS特性。只需要把每个导航链接放在指向关闭单选按钮的<label>里：

<!-- 关闭菜单的单选按钮（默认选中） -->
<input type="radio" name="rbnav" id="rbn-close" checked>
<!-- 打开菜单的单选按钮 -->
<input type="radio" name="rbnav" id="rbn-open">

<!-- 打开菜单的按钮 -->
<label for="rbn-open">☰ 菜单</label>

<!-- 导航菜单 -->
<nav class="menu">
  <ul>
    <li>
      <label for="rbn-close">
        <a href="#home">首页</a>
      </label>
    </li>
    <li>
      <label for="rbn-close">
        <a href="#about">关于我们</a>
      </label>
    </li>
    <li>
      <label for="rbn-close">
        <a href="#contact">联系我们</a>
      </label>
    </li>
  </ul>
</nav>

CSS保持你原来的逻辑就行：

/* 默认隐藏菜单 */
.menu {
  display: none;
}

/* 打开菜单按钮选中时显示菜单 */
#rbn-open:checked ~ .menu {
  display: block;
}

原理：点击链接时，同时也触发了包裹它的<label>，这会让关闭单选按钮被选中，菜单随之隐藏。浏览器会同时处理链接跳转和单选按钮状态切换，不会冲突。

方案二：使用:focus-within伪类（现代浏览器支持） #

如果不想改太多HTML结构，可以用CSS的:focus-within伪类——当容器内任意元素获得焦点时，就会触发样式。用户点击链接时，链接会获得焦点，我们就用这个状态隐藏菜单：

/* 默认隐藏菜单 */
.menu {
  display: none;
}

/* 打开菜单按钮选中时显示菜单 */
#rbn-open:checked ~ .menu {
  display: block;
}

/* 菜单内元素获得焦点（比如点击链接）时，隐藏菜单 */
#rbn-open:checked ~ .menu:focus-within {
  display: none;
}

注意：需要给菜单容器加tabindex属性，让它能获得焦点：

<nav class="menu" tabindex="0">
  <!-- 你的导航链接 -->
</nav>

这个方法还有额外优势：用户用键盘（Tab键）导航到菜单链接时，菜单会保持打开，直到点击链接或失去焦点。

为什么原来的方法失效？ #

当你用<label>包裹整个<ul>时，点击链接后浏览器会优先处理<a>的跳转行为，虽然事件会冒泡到<label>，但部分浏览器不会触发<label>的单选按钮切换——因为链接的点击已经被优先处理了。上面的两个方案要么让每个链接直接关联关闭按钮，要么利用焦点状态绕开这个问题。

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