最可靠纯css实现faq折叠是用input[type="checkbox"]的:checked状态联动兄弟元素显隐，需正确dom顺序、max-height过渡动画、无障碍支持及伪元素重绘箭头。
用 input[type="checkbox"] 控制折叠状态最可靠
纯 CSS 实现 FAQ 折叠，核心是利用 checkbox 的 :checked 状态联动兄弟元素的显示/隐藏。不用 JS 不仅轻量，还能保留在表单提交中（如果需要）或支持键盘空格切换。
常见错误是直接对 label 或 div 加 display: none，结果发现点击没反应——因为没绑定 checkbox 的状态变化。必须让 checkbox 是触发源，且目标内容是它的后续兄弟元素（用 ~ 或 + 选择器）。
-
input[type="checkbox"]必须放在每个 FAQ 条目前，并设id -
label要用for属性关联该id，或包裹 checkbox（更稳妥） - 被折叠的内容需紧跟在 checkbox 后（同级），用
input:checked ~ .answer控制显隐 - 别忘了加
appearance: none隐藏原生 checkbox，再用伪元素重绘“箭头”
折叠动画要用 max-height + overflow，不是 height
直接写 height: 0 → height: auto 不会动画，因为 auto 无法计算过渡起点终点。max-height 是唯一能平滑过渡的替代方案。
典型坑是设 max-height: 0 → max-height: 500px，但内容实际高度超 500px 就会截断；或者忘了配 overflow: hidden，导致内容溢出可见。
立即学习“前端免费学习笔记（深入）”；
- 给折叠容器设
max-height: 0、overflow: hidden、transition: max-height 0.3s ease-out - 展开时设一个足够大的
max-height值（如600px），确保内容完全可见 - 不要用
opacity单独做折叠——它不占布局空间，但用户仍可聚焦/操作内部元素 - 若内容含图片或异步加载，高度可能动态变化，此时 CSS 动画会不准，得换 JS
label 和 input 的 DOM 顺序不能错
很多初学者把 input 放在 label 外面、或嵌套错层，导致 ~ 选择器失效。CSS 里没有“父选择器”，只能靠兄弟/后续兄弟关系驱动。
正确结构必须是：input → label → .answer（三者同级），或 input → .answer（label 包裹 input，.answer 紧跟 label）。
- 推荐写法：
<input type="checkbox" id="faq1"> <label for="faq1">问题标题</label> <div class="answer">回答内容</div>
- 这样就能用
input#faq1:checked ~ .answer精准控制 - 如果用
label > input，那.answer必须是label的下一个兄弟，不能写在label内部 - 移动端点击热区小？给
label加display: block和足够 padding，别只依赖文字区域
无障碍和键盘支持不能靠运气
纯 CSS 方案默认不支持键盘空格/回车切换，也不通知屏幕阅读器状态变化。这不是“锦上添花”，而是基本可用性门槛。
常见疏忽是只写了视觉切换，但 aria-expanded 没同步，或者没给 label 加 tabindex="0"，导致键盘用户卡住。
- 在
label上加role="button"和tabindex="0" - 用
aria-expanded="false"初始化，JS 或伪类配合更新（纯 CSS 无法改属性，需少量 JS 补齐） - 若坚持零 JS，至少加
aria-hidden="true"到折叠内容上，并随:checked切换 - 别忽略焦点管理：展开后，按 Tab 应能进入
.answer内部可聚焦元素（如链接）
