:checked伪类能替代JavaScript控制折叠状态，因其直接监听checkbox选中状态并触发浏览器重绘，通过兄弟选择器控制后续元素的max-height、opacity等可过渡属性实现无JS折叠效果，轻量且无障碍友好。
为什么:checked伪类能替代JavaScript控制折叠状态
:checked 本质是监听 <input type="checkbox"> 的选中状态，而 checkbox 的状态变化会触发浏览器重绘。只要把 checkbox 和面板内容用 HTML 结构关联（比如兄弟或父子），再用 CSS 控制其后继元素的 display、max-height 或 opacity，就能实现无 JS 的折叠效果。关键在于：它不依赖事件监听或 DOM 操作，纯靠状态映射样式，所以轻量、可服务端渲染、无障碍友好。
但要注意：必须用 checkbox，radio 不适合多面板独立开关；label 必须正确绑定 for 或包裹 input，否则点击无响应。
HTML结构怎么写才让:checked生效
核心是建立「可控开关」和「目标面板」之间的可选中→可定位关系。最可靠的是「相邻兄弟选择器」+ 或「通用兄弟选择器」~：
-
<input type="checkbox" id="panel1"> 必须有唯一 id
-
<label for="panel1">标题</label> 或 <label><input>标题</label>，确保点击穿透到 checkbox
- 面板内容（
<div class="panel">）必须紧跟在 input 后面，且是它的**下一个兄弟元素**，才能用 input:checked + .panel
- 如果中间插入了 label，就得用
input:checked ~ .panel，但要小心它会匹配所有后续同类元素
<input type="checkbox" id="panel1"> 必须有唯一 id
<label for="panel1">标题</label> 或 <label><input>标题</label>，确保点击穿透到 checkbox<div class="panel">）必须紧跟在 input 后面，且是它的**下一个兄弟元素**，才能用 input:checked + .panel
input:checked ~ .panel，但要小心它会匹配所有后续同类元素错误示例：<div><input></div><div class="panel"></div> —— 因为 input 和 .panel 不是兄弟，:checked + .panel 失效。
如何用CSS平滑展开/收起动画
:checked 本身不支持过渡，所以不能直接对 display 做 transition（它不可动画）。可行方案只有两个：
- 用
max-height + overflow: hidden：初始设 max-height: 0，checked 时设一个足够大的值（如 max-height: 500px），配合 transition: max-height 0.3s ease。注意：值必须是具体数字，不能用 none 或 fit-content（不触发过渡）
- 用
height + padding + opacity 组合：先设 height: 0; padding: 0; opacity: 0，再用 transition: height 0.25s, padding 0.25s, opacity 0.25s。但需精确知道内容高度，实用性低
max-height + overflow: hidden：初始设 max-height: 0，checked 时设一个足够大的值（如 max-height: 500px），配合 transition: max-height 0.3s ease。注意：值必须是具体数字，不能用 none 或 fit-content（不触发过渡）height + padding + opacity 组合：先设 height: 0; padding: 0; opacity: 0，再用 transition: height 0.25s, padding 0.25s, opacity 0.25s。但需精确知道内容高度，实用性低推荐第一种。常见坑：max-height 设太小会截断内容；设太大则动画时间变长（即使内容短，也会按最大值过渡）；别忘了加 overflow: hidden，否则内容会溢出。
移动端点击无反应？检查这三件事
移动端常出现点不动、点一次没反应、或者点完立刻回弹——基本不是 CSS 问题，而是 HTML 或交互细节没处理好：
立即学习“前端免费学习笔记（深入）”；
- 确保
label有足够点击热区（至少 44×44px），小图标要包在label里或加padding - 避免在
label上写pointer-events: none或父容器有overflow: hidden裁剪了点击区域 - 某些安卓 WebView 对
label[for]支持弱，建议改用包裹式写法：<label><input type="checkbox">标题</label>
另外，iOS Safari 有时会因「双击缩放」干扰点击，可在 <meta name="viewport"> 中确认没有禁用 user-scalable 导致误判。
真正麻烦的是嵌套折叠（子面板依赖父面板展开）、键盘焦点管理、以及屏幕阅读器播报逻辑——这些光靠 :checked 做不了，得退回到 JS 方案。纯 CSS 折叠只适合简单、静态、单层的场景。
