纯css手风琴最稳妥方案是用max-height过渡替代height，初始设0，展开设预估最大高度（如500px），配合overflow:hidden和transition；js需同步class与aria-expanded/aria-hidden属性，遍历所有触发器而非queryselector单个，容器隔离防干扰，并处理移动端touch-action与blur焦点问题。
手风琴折叠用 max-height 过渡最稳妥
纯 CSS 实现手风琴，不能直接对 height 做 transition（因为 height: auto 无法计算起止值），所以得绕道：用 max-height 模拟。关键是设一个足够大但不过分夸张的值——太小会截断内容，太大则动画拖沓。
-
max-height初始设为0，展开时设为预估最大高度（比如500px） - 配合
overflow: hidden防内容溢出 - 过渡写在
max-height上：transition: max-height 0.3s ease-in-out - 别用
display: none切换——它不触发过渡，且会破坏可访问性
JavaScript 控制展开状态要同步 class 和 aria 属性
光靠 CSS 不够，用户点击需要 JS 切换状态。重点不是“怎么切换”，而是“切得准不准”：既要控制视觉，也要告诉屏幕阅读器当前是否展开。
- 给触发按钮加
aria-expanded="false"，展开后改为"true" - 给内容区加
aria-hidden="true"，展开时改为"false" - 用
classList.toggle()切换一个统一 class（如is-open），CSS 里用它驱动max-height - 避免用
onclick行内事件——不利于复用和测试
多个手风琴项共存时，别用全局 querySelector
常见错误是写 document.querySelector('.accordion-trigger') 只拿到第一个，点其他项没反应。必须绑定到每个触发器，或用事件委托。
- 推荐遍历所有触发器：
document.querySelectorAll('.accordion-trigger').forEach(...) - 如果用事件委托，监听父容器，再用
event.target.closest('.accordion-trigger')安全定位 - 每个手风琴项建议包裹在独立容器里（如
<section class="accordion-item"></section>），方便 JS 找到对应的内容区 - 别把所有内容区都塞进同一个
<div>——展开/收起会互相干扰 <h3>移动端点击穿透和 focus 状态容易被忽略</h3> <p>在 iOS Safari 或某些安卓浏览器上，点击后按钮可能不响应第二次，或键盘焦点残留导致样式错乱。</p> <ul> <li>给触发按钮加 <code>touch-action: manipulation，减少 300ms 延迟 - 收起后手动调用
element.blur()，防止 focus 样式卡住 - 用
:focus-visible替代:focus控制键盘聚焦样式，避免鼠标点击也触发 - 测试时真机点一点，别只靠桌面模拟器——触摸事件行为差异很大
max-height 的取值、aria 同步时机、事件绑定范围、移动端交互反馈。漏掉任意一项，都可能让功能在某类设备或辅助工具下失效。
