如何用CSS3的:checked伪类实现纯CSS手风琴折叠菜单？-css教程-PHP中文网

纯 CSS 手风琴菜单必须用配合 :checked 实现，因不支持多级嵌套、精确动画及伪类控制；正确结构为 :checked ~ .accordion-content，用 max-height 过渡并兼顾可访问性。

如何用css3的:checked伪类实现纯css手风琴折叠菜单？

纯 CSS 实现手风琴菜单完全可行，:checked 是核心，但必须配合或才能触发状态切换——没有它，:checked 什么也选不到。

为什么必须用而不能只靠？

确实原生支持折叠，但它不支持多级嵌套、无法用 CSS 精确控制展开动画（max-height 过渡失效），且 open 属性无法被伪类动态控制。而 :checked + 给你完整 DOM 控制权：

隐藏但保留语义和可访问性（加 aria-hidden="true" 或视觉隐藏即可）
后续内容用相邻兄弟选择器 ~ 或通用兄弟选择器 + 关联
所有过渡、高度、旋转图标都能用 CSS 精确驱动

`:checked ~ .accordion-content` 的选择器写法要点

常见错误是写成 .accordion-item :checked + .accordion-content，结果失效——因为和内容块通常不是直接相邻兄弟。正确结构应是：

<div class="accordion-item">
  <input type="checkbox" id="item1"><label for="item1">标题</label>
  <div class="accordion-content">...</div>
</div>

此时必须用 :checked ~ .accordion-content（通用兄弟），而非 +（仅限紧邻）。否则只要中间插入了，选择就断掉。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

~ 向后查找所有符合条件的兄弟元素，更健壮
若坚持用 +，需把放在和 之间，但会破坏语义顺序
display: none 的仍参与选择器匹配，不影响 :checked


展开/收起动画的关键：用 max-height 而非 height

height: auto 无法过渡，硬写 height: 0 → height: 200px 会导致内容截断或动画卡顿。可靠方案是：

初始状态：max-height: 0 + overflow: hidden

:checked 状态：max-height: 300px（设一个足够覆盖内容的“安全上限”）
加 transition: max-height 0.3s ease-in-out

如果内容高度超过 300px，动画会提前停止——这是唯一需要手动预估的地方

进阶做法可用 JS 测量真实高度再内联设置，但那就不是“纯 CSS”了。
最易忽略的是可访问性：没给  加 id，或  没用 for 关联，键盘用户就无法空格切换；还有屏幕阅读器可能读出“未勾选的复选框”，需加 role="button" 和 aria-expanded 动态控制——这些不是 CSS 能解决的，但少了它们，:checked 手风琴就算写得再漂亮，也算半残。