用 checkbox 模拟折叠更轻量，因无需事件监听、不触发重排、纯 CSS 控制；需视觉隐藏 checkbox、用 max-height 实现动画，并确保结构与绑定正确。
用 checkbox 模拟折叠状态为什么比 JS 更轻量？
因为不需要监听事件、不触发重排、不依赖 DOM 查询，纯 CSS 控制显示/隐藏，适合静态 FAQ 或 SEO 敏感页面。浏览器对 :checked 伪类的响应是原生且即时的，且所有现代浏览器（包括 Safari 12.1+）都支持该用法。
- 关键前提是：每个
input[type="checkbox"]必须有唯一id，对应label[for]和后续div的相邻选择器（如~或+） - 不能用
display: none直接隐藏 checkbox 元素本身——得用position: absolute; clip: rect(0 0 0 0)等方式“视觉隐藏”，否则 Safari 会跳过其状态变化 - 如果用
~选择器控制非紧邻元素，要确保结构中 checkbox 是目标折叠内容的**前序兄弟节点**，且中间不能插入其他块级元素打断兄弟关系
label 和 input 的绑定顺序影响点击区域
必须把 input 放在 label 前面（或用 for 显式绑定），否则点击 label 不会触发 checkbox 切换。常见错误是把 input 放在 label 内部又没设 for，导致 Safari 下点击无响应。
- 推荐写法：
<input type="checkbox" id="faq-1"> <label for="faq-1">Q: 为什么加载慢？</label> <div class="answer">A: 因为图片未懒加载...</div>
- 禁用默认 checkbox 样式：给
input加appearance: none，再用::before伪元素画箭头图标，避免各浏览器默认样式不一致 - label 默认是内联元素，若需整行可点击，加
display: block；但别忘了同时设cursor: pointer提示交互性
折叠动画要用 max-height 而不是 height
height: 0 → height: auto 无法过渡，浏览器不知道 auto 对应的具体像素值。必须用 max-height 配合一个“足够大但不过分”的固定值（比如 max-height: 500px），再配合 overflow: hidden。
- 过渡写法必须包含
max-height和opacity（可选）：transition: max-height 0.3s ease-out, opacity 0.2s ease-in;
- 初始状态设
max-height: 0; opacity: 0; overflow: hidden;；展开时设max-height: 500px; opacity: 1; - 500px 是经验值——太小会截断长答案，太大则收起时有明显延迟；若答案高度差异极大，可按类别设不同值（如
.answer-short { max-height: 120px; }）
移动端点击穿透和 focus 样式干扰问题
iOS Safari 在 checkbox 切换后会自动 focus 到 label，触发 outline，且有时点击 label 后焦点还留在 input 上，造成下一次点击失效（尤其快速连点）。这不是 bug，而是 focus 管理逻辑差异。
立即学习“前端免费学习笔记（深入）”；
- 清除默认 focus 样式：
label:focus, input:focus { outline: none; } - 防点击穿透：给
label加-webkit-tap-highlight-color: transparent;，并确保父容器没设pointer-events: none - 如果用户习惯“点标题收起”，需注意：当前展开状态下再次点击同一 label，应能收起——这由 checkbox 的 toggle 行为天然保证，无需额外 JS
max-height 的取值平衡：前者影响 Safari 兼容性，后者决定动画是否自然。这两个点一旦设错，整个交互就卡顿或失灵。 
