求助：纯CSS无过渡实现汉堡菜单图标点击切换为关闭图标

嘿，我刚好有个纯CSS的解决方案，完全符合你“无动画、点击直接切换、不用JS”的需求！核心思路是利用隐藏的复选框作为状态触发器——因为CSS本身没法直接监听普通元素的点击状态，但复选框的:checked伪类可以完美实现持久的切换效果。

方案一：用独立元素实现汉堡/叉号切换 #

这种方式结构清晰，容易理解，适合新手：

HTML 结构

<!-- 隐藏的复选框，作为状态开关 -->
<input type="checkbox" id="menu-switch" class="hidden-checkbox">
<!-- 点击的图标容器，和复选框关联 -->
<label for="menu-switch" class="menu-icon">
  <!-- 汉堡菜单的三条线 -->
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <!-- 叉号的两条线，默认隐藏 -->
  <span class="cross-line cross-1"></span>
  <span class="cross-line cross-2"></span>
</label>

CSS 样式

/* 彻底隐藏复选框，不占空间也不干扰点击 */
.hidden-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 设置图标容器的点击区域和基础样式 */
.menu-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
  cursor: pointer;
}

/* 汉堡菜单的三条线样式 */
.hamburger-line {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #222;
  margin: 5px 0;
}

/* 叉号的基础样式，默认隐藏 */
.cross-line {
  display: none;
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #222;
  top: 50%;
  transform: translateY(-50%);
}

/* 叉号的两条线分别旋转 */
.cross-1 {
  transform: translateY(-50%) rotate(45deg);
}
.cross-2 {
  transform: translateY(-50%) rotate(-45deg);
}

/* 当复选框被选中时，切换显示状态 */
.hidden-checkbox:checked ~ .menu-icon .hamburger-line {
  display: none;
}
.hidden-checkbox:checked ~ .menu-icon .cross-line {
  display: block;
}

方案二：用伪元素简化HTML结构 #

如果想减少HTML元素，可以用伪元素生成汉堡的线条，点击后直接修改伪元素样式变成叉号：

HTML 结构

<input type="checkbox" id="menu-switch" class="hidden-checkbox">
<label for="menu-switch" class="menu-icon"></label>

CSS 样式

.hidden-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.menu-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
  cursor: pointer;
}

/* 用伪元素和内部span生成汉堡的三条线 */
.menu-icon::before,
.menu-icon::after,
.menu-icon span {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background-color: #222;
  margin: 4px 0;
}

/* 当复选框被选中时，把伪元素旋转成叉号，隐藏中间的线 */
.hidden-checkbox:checked ~ .menu-icon::before {
  position: absolute;
  top: 14px;
  transform: rotate(45deg);
}
.hidden-checkbox:checked ~ .menu-icon::after {
  position: absolute;
  top: 14px;
  transform: rotate(-45deg);
}
.hidden-checkbox:checked ~ .menu-icon span {
  display: none;
}

为什么你之前的尝试可能失败？ #

大概率是没用到正确的状态持久化方法：比如用了:active伪类，它只有在点击按住时生效，松开就会恢复；而复选框的:checked是持久状态，点击一次切换一次，刚好符合菜单开关的需求。另外要注意label的for属性必须和复选框的id完全一致，否则点击图标不会触发状态变化。

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