手风琴菜单推荐用语义化 + 结构，原生支持展开/收起、无障碍友好；纯css动画需用 max-height 替代 height 过渡；多开为默认行为，单开必须js实现；移动端需扩大 点击区域。
手风琴菜单的HTML结构怎么组织才方便CSS控制
手风琴菜单本质是「单选折叠」，关键在于用语义化标签表达层级关系。推荐用 <details></details> + <summary></summary>，原生支持展开/收起，无需JS，且无障碍友好。
-
<details></details>包裹每个可折叠项，每个项一个 -
<summary></summary>必须是<details></details>的第一个子元素，作为标题栏 - 内容直接跟在
<summary></summary>后面，不用额外容器（避免多一层嵌套干扰CSS）
别用 <div> + 类名模拟，那样必须写JS监听点击、切换状态、控制高度——既增加复杂度，又容易破坏键盘导航和屏幕阅读器体验。<h3>纯CSS实现展开动画的关键在哪</h3>
<p><code><details></details> 默认不支持 height 过渡，因为展开时内容高度是 auto，而 CSS 无法对 auto 做 transition。必须绕过这个限制：
- 给
<details></details>设置overflow: hidden - 对
<details>[open] > *:not(summary)</details>使用max-height+transition -
max-height值要略大于内容实际高度（比如设为600px），否则动画会卡顿或截断
示例片段：
details > *:not(summary) {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out, opacity 0.2s;
}
details[open] > *:not(summary) {
max-height: 600px;
opacity: 1;
}
注意：如果内容高度差异大（比如某一项有10行文字，另一项只有1行），统一设 600px 可能导致短内容动画过长。更稳妥的做法是用 JS 动态计算并内联 max-height，但那就超出纯CSS范围了。
如何让多个手风琴同时展开或强制单开
<details></details> 默认行为是「各自独立」——可以多个同时打开。如果需要「单开模式」（类似传统手风琴，打开一个就关闭其他），CSS 无解，必须用 JS 监听 toggle 事件并手动 close 其他 <details></details>。
但如果只是想允许多开，什么也不用做——这正是 <details></details> 的默认行为，也是它的优势。
- 不要给所有
<details></details>加同一 class 再试图用 CSS 控制互斥，CSS 没有“兄弟元素排除”这种逻辑 - 如果项目已用 JS 实现手风琴，检查是否重复绑定了 click 事件，导致
<summary></summary>点击触发两次 toggle（一次原生，一次JS）
移动端点击区域小、误触多怎么办
<summary></summary> 默认只响应文字区域点击，手指点不准就失效。必须扩大可点击区域：
- 给
<summary></summary>加padding（比如padding: 12px 16px） - 设置
cursor: pointer提示可交互 - 避免用
font-size: 0或line-height: 0清除默认间距，那会让点击区进一步缩小
另外，iOS Safari 对 <summary></summary> 的 focus 样式支持不一致，建议加一句：
summary::-webkit-details-marker { display: none; }
再用伪元素重绘箭头，避免原生三角符号位置偏移或消失。
手风琴看着简单，但 max-height 动画的取值、移动端点击热区、以及是否真需要 JS 干预单开逻辑——这三个地方最容易反复返工。
