因为手风琴要求单选互斥，radio天然支持同name组内单选，无需js控制；而checkbox需手动管理状态，易出错。关键需同名、结构线性、:checked配合兄弟选择器精准控制显隐。
为什么用 input[type="radio"] 而不是 input[type="checkbox"]
单选框能天然保证“单开单关”，避免多个面板同时展开——这是手风琴的核心行为。用 checkbox 会多出状态管理逻辑，比如监听点击、手动关闭其他项，反而容易出错。兄弟选择器（~）只对后续同级元素生效，而 radio 的 :checked 状态触发后，能精准控制它后面的 .accordion-content 显隐。
关键前提是：所有 input 必须有相同 name 值，否则无法互斥；且每个 input 后紧跟对应的 label 和 .accordion-content，结构必须严格线性。
-
name属性必须一致，例如name="accordion" -
label需用for关联id，或直接包裹input（推荐后者，免去id冲突风险） -
.accordion-content必须是input的后续兄弟元素，不能嵌套在别的标签里
:checked ~ .accordion-content 为什么有时不生效
最常见的原因是 DOM 结构断裂：比如在 input 和 .accordion-content 之间插入了无关的 div 或注释，导致兄弟关系中断。CSS 的 ~ 选择器只匹配**之后的同级兄弟**，不跨层级，也不跳过中间节点。
另一个坑是默认隐藏方式：如果用 display: none，切换时没有过渡动画；但若改用 max-height: 0 + overflow: hidden，就必须确保内容高度可预估（或设一个足够大的 max-height 值），否则动画会卡顿或截断。
- 检查浏览器开发者工具中，
.accordion-content是否真为input的下一个同级元素 - 避免给
.accordion-content外层加额外包装容器 - 过渡动画建议只作用于
max-height和opacity，不要动display
如何让第一个菜单默认展开
只需给第一个 input 加上 checked 属性即可。CSS 不需要额外规则——:checked ~ .accordion-content 会自动匹配并显示对应内容。
注意：如果页面加载后 JS 动态修改了 checked 状态，纯 CSS 无法响应（因为 :checked 是伪类，只响应初始 HTML 状态或用户交互）。所以默认展开必须写死在 HTML 里，不能靠 JS 设置后再指望 CSS 生效。
- 写法：
<input type="radio" name="accordion" checked> - 如果用了
id+for，记得第一个label的for值要匹配这个id - 移动端 Safari 对
max-height过渡支持略差，可加-webkit-transition兜底
移动端点击无反应？检查 label 是否可点击
很多情况下，label 没有设置 cursor: pointer 或 user-select: none，导致视觉上像按钮但实际点不动；更常见的是 label 内部用了 display: block 却没设高度/内边距，触摸热区太小。
真正起作用的是 label 包裹 input 的结构，而不是靠 for 绑定——后者在某些安卓 WebView 中存在兼容问题。所以优先采用嵌套写法：
<label> <input type="radio" name="accordion"> 标题文本 </label> <div class="accordion-content">...</div>
- 确保
label有明确宽高或padding，尤其在小屏上 - 避免在
label上设置pointer-events: none或父级遮挡 - 测试时用真机，模拟器可能忽略触摸事件冒泡细节
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
