CSS折叠菜单点击选项后无法关闭 求纯CSS解决方案

嘿，我完全懂你遇到的困扰——纯CSS做的折叠菜单能通过图标展开，但点菜单项的时候没法自动收起，对吧？其实这问题的核心是你的状态触发器只绑定了菜单图标，没让菜单项也能触发关闭动作。咱们用CSS的:checked伪类配合隐藏的复选框就能完美解决，完全不需要JS！

核心原理 #

纯CSS实现交互菜单，通常会用一个隐藏的<input type="checkbox">作为状态开关：

• 菜单图标用<label>绑定这个复选框，点击图标切换复选框的checked状态
• 菜单项也关联这个复选框的状态，点击时让复选框回到未选中状态，从而收起菜单

修正后的完整代码 #

<input type="checkbox" id="menuToggle">
<div class="menu-icon">
  <label for="menuToggle">☰</label>
</div>
<nav class="menu">
  <label for="menuToggle"><a href="#">首页</a></label>
  <label for="menuToggle"><a href="#">关于我们</a></label>
  <label for="menuToggle"><a href="#">联系我们</a></label>
</nav>

body {
  margin: 0;
  padding: 0;
  background: #232323;
  color: #cdcdcd;
  font-family: "Avenir Next", "Avenir", sans-serif;
}

/* 隐藏复选框，仅作为状态容器 */
#menuToggle {
  display: none;
}

/* 菜单图标样式 */
.menu-icon {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 2rem;
  cursor: pointer;
  z-index: 100;
}

/* 默认菜单收起状态 */
.menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 200px;
  height: 100vh;
  background: #fff;
  padding-top: 60px;
  transition: left 0.3s ease;
}

/* 复选框选中时展开菜单 */
#menuToggle:checked + .menu-icon + .menu {
  left: 0;
}

/* 菜单项样式 */
.menu label {
  display: block;
  cursor: pointer;
}
.menu a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}
.menu a:hover {
  color: #ff4081;
  background-color: #f5f5f5;
}

关键细节解释 #

1. 隐藏的复选框：#menuToggle被设置为display: none，它只是后台的状态容器，不会显示在页面上
2. 图标与复选框绑定：<label for="menuToggle">让点击图标时直接切换复选框的checked状态，触发菜单展开/收起
3. 菜单项触发关闭：把每个菜单项用<label for="menuToggle">包裹，这样点击菜单项时会同步触发复选框回到未选中状态，菜单自然收起
4. 过渡动画：给菜单的left属性加了transition，让展开/收起的过程更平滑

这样修改后，不管是点击菜单图标还是任意菜单项，都能正常切换菜单的展开/收起状态啦！

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