17370845950

本文介绍一种纯 css 方案：利用 `:checked` 伪类与相邻兄弟选择器（`+`）实现点击复选框显示/隐藏关联内容，无需任何 javascript，兼容现代浏览器且语义清晰。

在前端开发中，常需实现“点击展开/收起”交互效果。若仅需基础显隐控制，完全可借助 CSS 原生能力完成，避免引入 JS 的额外开销与复杂性。

核心原理在于：

• 利用 的 :checked 状态作为触发条件；
• 使用 相邻兄弟选择器 + 精准定位紧随其后的目标容器（而非后代选择器 ` 或子选择器>），因为原始 HTML 中.checkbox` 是复选框的下一个同级元素，而非其后代；
• 通过初始 display: none 隐藏内容，再用 #expand:checked + .checkbox { display: block; } 实现状态切换。

✅ 正确的 CSS 写法如下：

/* 默认隐藏目标容器 */
.checkbox {
  display: none;
}

/* 当 #expand 被勾选时，显示其后紧跟的 .checkbox 元素 */
#expand:checked + .checkbox {
  display: block;
}

⚠️ 注意事项：

• HTML 结构中，.checkbox 必须紧接在 #expand 复选框之后（中间不能有其他标签或文本节点），否则 + 选择器将失效；
• 不要将 .checkbox 类同时用于复选框本身（如 ）和目标容器——这会造成语义混淆且样式冲突。建议为控制开关使用 id="expand"，为目标容器单独使用 class="expand-content" 等更清晰的命名；
• 若需过渡动画（如淡入），可补充 opacity 和 transition，但注意 display 无法过渡，需改用 visibility + opacity 组合方案。

? 推荐优化后的 HTML 结构示例：

  
    Pincha para recibir información:
    
    ▼ Expand
    
      
 Tenerife
      
 Gran Canaria
      
 Lanzarote
      
    
  

对应优化 CSS：

.expand-content {
  display: none;
  margin-top: 8px;
  padding-left: 20px;
}
#expand:checked + label + .expand-content {
  display: block;
}

（此变体通过 label 占位，提升可访问性与点击区域）

总结：纯 CSS 显隐控制轻量、可靠、易维护，适用于表单折叠、FAQ 展开等场景。只要掌握 :checked 与 + / ~ 选择器的配合逻辑，即可零 JS 实现优雅交互。