纯CSS侧边导航：点击下拉菜单时关闭其他菜单可行吗？

好问题！仅用CSS实现“打开一个下拉菜单时自动关闭其他”的需求是完全可行的，但需要调整你当前的实现思路——核心是把checkbox换成**radio按钮**，因为radio天生具备同一组内互斥选中的特性，刚好匹配你的需求。

为什么checkbox不行？ #

你当前用checkbox的方案，每个checkbox的选中状态是独立的，而CSS的选择器只能选择当前元素之后的兄弟元素，无法影响到它之前的元素。也就是说，当你选中chk1时，能控制它后面的.dropnav，但没办法让chk2、chk3对应的.dropnav隐藏，因为它们在chk1的前面，CSS做不到反向选择。

改用radio的实现方案 #

radio按钮只要设置相同的name属性，就会自动成为一组，同一时间只能有一个被选中。我们可以利用这个特性来实现互斥下拉：

修改后的HTML结构

<ul class="sidebar-nav">
  <li>
    <input type="radio" id="chk1" name="dropdown-group">
    <label for="chk1">Dropdown 1</label>
    <div class="dropnav">
      <ul>
        <li>Sub Menu 1-1</li>
        <li>Sub Menu 1-2</li>
      </ul>
    </div>
  </li>
  <li>
    <input type="radio" id="chk2" name="dropdown-group">
    <label for="chk2">Dropdown 2</label>
    <div class="dropnav">
      <ul>
        <li>Sub Menu 2-1</li>
        <li>Sub Menu 2-2</li>
      </ul>
    </div>
  </li>
  <li>
    <input type="radio" id="chk3" name="dropdown-group">
    <label for="chk3">Dropdown 3</label>
    <div class="dropnav">
      <ul>
        <li>Sub Menu 3-1</li>
        <li>Sub Menu 3-2</li>
      </ul>
    </div>
  </li>
</ul>

对应的CSS代码

/* 隐藏radio按钮 */
[type="radio"] {
  display: none;
}

/* 默认隐藏所有下拉菜单 */
.dropnav {
  display: none;
}

/* 当radio被选中时，显示对应的下拉菜单 */
[type="radio"]:checked ~ .dropnav {
  display: block;
}

/* 可选：给label加点击样式，提升交互感 */
label {
  cursor: pointer;
  padding: 8px 12px;
  display: block;
}

label:hover {
  background-color: #f0f0f0;
}

额外优化：支持关闭所有下拉菜单 #

如果你希望用户能点击已打开的菜单来关闭它（而不是只能切换到其他菜单），可以加一个额外的“隐藏”radio，放在所有菜单的最前面：

<ul class="sidebar-nav">
  <!-- 隐藏的radio，默认选中，用于关闭所有下拉 -->
  <input type="radio" id="chk-close" name="dropdown-group" checked>
  <li>
    <input type="radio" id="chk1" name="dropdown-group">
    <label for="chk1">Dropdown 1</label>
    <div class="dropnav">
      <ul>
        <li>Sub Menu 1-1</li>
        <li>Sub Menu 1-2</li>
      </ul>
    </div>
  </li>
  <!-- 其他菜单结构同上 -->
</ul>

再补充一点CSS，让点击已选中的菜单标题时切换到关闭状态：

/* 给已选中的菜单标题加一个透明覆盖层，点击时触发关闭radio */
[type="radio"]:checked + label {
  position: relative;
}

[type="radio"]:checked + label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
}

/* 点击覆盖层时，选中关闭radio */
[type="radio"]:checked + label::after {
  pointer-events: auto;
}

#chk-close {
  position: absolute;
  opacity: 0;
}

这个优化方案可以让用户点击已打开的菜单标题来关闭下拉，更符合日常交互习惯。

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