手风琴菜单应使用 radio/checkbox 驱动状态，配合 ~ 选择器联动内容区；CSS 用 max-height 过渡实现动画，避免 height: auto；label 需 block + padding 扩大点击区；input 不隐藏而移出视口以保障无障碍。
手风琴菜单的HTML结构怎么搭才不踩坑
手风琴菜单本质是「单选折叠」，不是随便套个 details 就能用——浏览器原生 details 默认允许多开，且无法用 CSS 精确控制动画时长和 easing。真正可控的做法是用 input[type="checkbox"] 或 input[type="radio"] 驱动状态，配合 ~（通用兄弟选择器）联动内容区域。
关键点：
- 每个折叠项必须包含一个带
id的input和一个紧随其后的label，再后跟div内容区（不能有其他元素隔开） - 用
input[type="radio"]实现单选互斥；用input[type="checkbox"]实现多开（按需选） -
label必须设置for属性指向对应input的id，否则点击无响应
CSS如何实现平滑展开/收起动画
CSS 动画不能直接作用于 height: auto，这是最常卡住的地方。解决办法是不用 height，改用 max-height + 过渡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给内容区设
max-height: 0（初始收起），overflow: hidden - 当对应
input:checked时，设max-height: 500px（值要大于内容最大高度，但别设太大，否则动画拖沓） - 过渡写成
max-height 0.3s ease-in-out，不要加height或opacity混合过渡，容易错帧 - 如果内容含图片或字体加载后高度变化，动画可能不准——此时得用 JS 监听
load后重设max-height，纯 CSS 无解
移动端点击区域太小怎么办
默认 label 只包裹文字，手指点不准。必须扩大可点击范围，但又不能影响布局。
安全做法：
- 给
label加display: block和padding: 12px 16px（iOS 最小触控区 44×44px） - 用
cursor: pointer提示可交互，避免用户误判 - 别给
label设width: 100%或position: absolute，容易盖住下面内容或破坏流式布局 - 若标题文字过长换行，用
white-space: normal确保 padding 包裹整块区域
键盘与屏幕阅读器支持不能漏
只靠鼠标点 label 不满足无障碍要求。必须让 Tab 键能聚焦、空格/回车能切换状态。
补救措施：
-
input不能加display: none或visibility: hidden——要用position: absolute; left: -9999px移出视口但保留可聚焦 - 给
label加tabindex="0"并监听keydown（仅当input不可聚焦时才需要，通常原生label关联后已支持空格键） - 用
aria-expanded和aria-controls动态同步状态：label[aria-expanded="false"]→input:checked ~ .content { aria-expanded="true" }（JS 辅助更新更稳）
纯 CSS 手风琴能做到视觉和基础交互可用，但无障碍和动态内容高度适配仍需少量 JS 补位。别硬扛，该加就加。
