仅用CSS实现点击元素增删类及菜单切换的可行性与方法

一、点击按钮切换菜单显示/隐藏（可行） #

可以利用CSS的:checked伪类结合隐藏的checkbox实现，原生CSS没有直接的点击事件监听，但表单元素的状态变化可被CSS捕获，以此模拟点击切换逻辑。

实现步骤： #

1. 在HTML中添加隐藏的<input type="checkbox">，关联触发按钮与菜单元素
2. 用<label>绑定该checkbox，点击label等同于点击checkbox，触发状态切换
3. 通过:checked伪类配合兄弟选择器/后代选择器，控制菜单的显示与隐藏

代码示例： #

<!-- HTML结构 -->
<div class="menu-container">
  <input type="checkbox" id="menu-toggle" hidden>
  <label for="menu-toggle" class="menu-btn">点击切换菜单</label>
  <div class="menu">
    <p>菜单选项1</p>
    <p>菜单选项2</p>
    <p>菜单选项3</p>
  </div>
</div>

/* CSS样式 */
.menu {
  display: none;
  background: #f5f5f5;
  padding: 10px;
  margin-top: 8px;
}

/* checkbox选中时显示菜单 */
#menu-toggle:checked ~ .menu {
  display: block;
}

/* 按钮点击反馈 */
.menu-btn {
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#menu-toggle:checked ~ .menu-btn {
  background: #e0e0e0;
}

二、仅用CSS实现“类的添加/移除”效果 #

CSS没有原生的“添加/移除类”语法，但可以通过状态伪类+选择器组合模拟类似效果——无需给DOM元素添加真实class，利用元素的状态（如选中、聚焦）触发样式变化，效果和添加/移除class完全一致。

1. 点击元素改变自身样式（模拟给自己加类） #

借助:checked或:focus（元素需支持聚焦）实现：

<input type="checkbox" id="self-toggle" hidden>
<label for="self-toggle" class="box">点击我变色</label>

.box {
  width: 100px;
  height: 100px;
  background: blue;
  transition: background 0.3s;
}

#self-toggle:checked ~ .box {
  background: red;
  /* 此处样式等同于给.box添加.active类的效果 */
}

2. 点击元素改变其他元素样式（模拟给其他元素加类） #

使用兄弟选择器（~）或后代选择器，结合状态伪类：

<input type="checkbox" id="other-toggle" hidden>
<label for="other-toggle" class="trigger">点击改变下方方块样式</label>
<div class="target-box">我是目标元素</div>

.target-box {
  width: 150px;
  height: 80px;
  background: #eee;
  margin-top: 10px;
  transition: all 0.3s;
}

#other-toggle:checked ~ .target-box {
  background: #4CAF50;
  color: white;
  padding: 10px;
  /* 此处样式等同于给.target-box添加.active类的效果 */
}

注意事项： #

• 这类方案依赖DOM结构，比如兄弟选择器仅能选择当前元素之后的同级元素
• 除:checked外，还可使用:focus-within（元素或后代获焦时）、:hover（鼠标悬停，非点击切换）等伪类拓展交互场景

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