纯CSS折叠展开靠input[type="checkbox"]:checked配合~兄弟选择器控制max-height和overflow:hidden实现动画，需确保input在面板前、同父级、label绑定正确，避免display:none影响可访问性。
checkbox + :checked 怎么触发折叠展开
靠 input[type="checkbox"] 的状态切换驱动样式变化，不用 JS 就能实现基础交互。核心是把 checkbox 放在面板标题前（或后），用 :checked 伪类配合兄弟选择器（~ 或 +）控制后续内容的 max-height 和 opacity。
- 必须把
input和要控制的面板内容放在同一父容器内，且input在内容之前，否则~无法选中 -
label要绑定到input（用for或包裹），否则点击标题不触发状态切换 - 不要只靠
display: none控制显隐——它不可动画，会导致折叠时突兀消失；改用max-height: 0+overflow: hidden配合过渡 -
max-height动画需设具体数值（如max-height: 500px），不能用max-height: none，后者无法过渡
为什么用 ~ 而不是 + 选择折叠内容
+ 只能选中紧邻的下一个兄弟元素，~ 可选中之后所有符合条件的兄弟元素。实际结构中，折叠内容往往不是紧跟在 input 后面（中间可能有 label、图标或空格文本节点），用 + 极易失效。
- 典型失败结构：
<input><label>标题</label><div class="panel">内容</div>→input + .panel不匹配，因为中间隔了label - 正确写法：
input:checked ~ .panel，只要.panel是input的后续兄弟即可 - 如果内容是
input的直接下一个兄弟（比如去掉label），+也能用，但容错性差，不推荐
折叠动画卡顿或不生效的常见原因
看似写了 transition: max-height 0.3s ease，但动画没反应，大概率是这几个点没对上。
-
max-height初始值和目标值单位必须一致（都用px），不能一边是0一边是none或fit-content - 折叠内容需设
overflow: hidden，否则高度撑开时内容会溢出 - 如果内容里有图片、iframe 等异步加载元素，初始
max-height估算不准，动画会“先弹再收”；稳妥做法是预设一个足够大的值（如max-height: 600px），并确保内容真实高度不超过它 - 不要给
input或label设display: none，这会让可访问性失效，屏幕阅读器读不到控件；用position: absolute; clip: rect(0 0 0 0)隐藏更安全
多面板共存时怎么避免互相干扰
多个折叠面板放一起时，若共用同一个 id 或没隔离作用域，一展开全开。关键在「唯一标识」和「作用域限制」。
立即学习“前端免费学习笔记（深入）”；
- 每个
input必须有唯一id，对应label[for]也得匹配，否则点击无效 - CSS 选择器要加父级限定，比如用
.accordion-item input:checked ~ .panel，而不是全局的input:checked ~ .panel - 如果用 JS 做增强（比如关闭其他已开面板），那 CSS 的纯方案就只是基础 fallback；纯 CSS 下无法“互斥”，这点得接受
- 别为了省事把所有面板塞进一个
input控制 —— 语义错误，且无法独立操作
最麻烦的其实是内容高度不确定时的动画平滑度，max-height 的预估值一旦偏小，就会看到内容被截断又突然撑开。真要完美，还是得 JS 测高，但日常项目里，给个保守的 500–800px 已经覆盖绝大多数场景。
