input[type="checkbox"]比details更优，因其支持多开、可默认展开、css控制力强、纯css驱动、兼容ie9+且表单可提交；需注意兄弟选择器限制、dom结构要求及无障碍适配。
为什么用 input[type="checkbox"] 而不是 details
因为 details 不支持多开、无法默认展开指定项、CSS 控制力弱，而 input[type="checkbox"] 配合兄弟选择器（~ 和 +）能精准控制任意面板的显隐，且兼容性好（IE9+）。关键在于：它不依赖 JS，纯 CSS 可驱动，状态可被表单自然提交（如果需要）。
常见错误是误用 :checked + .content 却把 .content 放在 checkbox 后面但中间隔了其他元素——兄弟选择器只匹配**紧邻**或**后续同级**元素，不能跨层级。
-
+只选中**紧邻下一个兄弟元素**（比如label + .content） -
~选中**后面所有符合条件的兄弟元素**（更灵活，推荐用于手风琴） - checkbox 必须和目标内容块处于**同一父容器内且为同级元素**
label 和 input 的绑定方式直接影响点击区域
必须用 for 属性或包裹结构让 label 点击能触发 checkbox 切换，否则菜单点不动。推荐用包裹式写法，语义清晰、点击区域大：
<label class="accordion-trigger"> <input type="checkbox" name="accordion"><span>标题文本</span> </label> <div class="accordion-content">...</div>
此时 input 是 label 的子元素，点击整个 label 都会触发切换。若用 for，则需确保 id 和 for 值严格一致，且 input 不能被 display: none 彻底隐藏（可用 position: absolute; clip: rect(0 0 0 0); 隐藏但保留可交互性）。
- 避免直接给
input设置display: none后又忘了用clip或opacity: 0保交互 - 不要把
input放在label外面再靠for绑定——容易因 DOM 顺序错乱导致~选择器失效 -
name属性可省略，但如果多个 accordion 共享 name，浏览器可能限制单选（实际是 checkbox，所以一般不用 name，或设不同值）
CSS 中控制显隐的关键选择器链
核心逻辑是：当 checkbox 选中时，影响其后所有 .accordion-content。典型写法：
input[type="checkbox"]:checked ~ .accordion-content {
max-height: 500px;
opacity: 1;
transform: scaleY(1);
}
对应未选中状态要设初始值：
.accordion-content {
max-height: 0;
opacity: 0;
transform: scaleY(0);
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.2s ease, transform 0.2s ease;
}
注意点：
-
max-height动画比height: auto可控——后者无法过渡，必须用固定值或足够大的预估值（如max-height: 500px） -
transform: scaleY()配合overflow: hidden能实现更顺滑的垂直折叠，但需注意子元素内联样式可能干扰 - 不要只写
transition: all——会导致无关属性也参与动画，拖慢性能 - 若内容高度差异极大，500px 可能不够，建议用 JS 计算后注入 style，但那就脱离纯 CSS 场景了
多个面板互斥（单开模式）需要额外处理
纯 CSS 无法“取消其他 checkbox 的 checked 状态”，所以默认是多开。要实现手风琴式的单开效果，有两个现实路径：
一是改用 input[type="radio"]，共享同一个 name，天然互斥：
<input type="radio" name="accordion-group" id="item1"><label for="item1">标题1</label> <div class="accordion-content">...</div>
二是保留 checkbox + JS 监听，点击时手动清除其他项的 checked。纯 CSS 方案里，radio 是最轻量的替代。
- radio 的 label 必须用
for绑定，不能包裹 input（否则无法触发互斥） - radio 默认无“关闭当前项”功能，需额外加一个「全部收起」的 radio 或用 JS 补全
- 如果业务上明确要求可多选（比如 FAQ 中允许多个问题同时展开），那 checkbox 就是正确选择，无需强求单开
真正难的不是写出第一版折叠效果，而是让过渡自然、点击反馈明确、键盘可访问（加 tabindex 和 aria-expanded）、移动端点击不延迟——这些往往被忽略，但用户一碰就感知得到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
