手风琴面板点击无反应是因details与summary嵌套错误：summary必须为details的直接且首个子元素，中间不可插入div等标签；正确结构为标题内容。
手风琴面板点击没反应？检查 details 和 summary 的嵌套关系
原生 details 元素是实现手风琴最轻量的方式，但它对 DOM 结构极其敏感：必须是 details 直接包裹 summary，且 summary 必须是 details 的第一个子元素。任何中间标签（比如 <div>、<code><span></span>）都会导致折叠逻辑失效，点击后不展开也不报错。
常见错误写法：
<details><div><summary>标题</summary></div> <p>内容</p> </details>
正确写法（无额外包裹）：
<details><summary>标题</summary><p>内容</p> </details>
- 如果需要样式隔离或语义分组，用
div包裹整个details，而不是插在中间 -
summary内可放内联元素（strong、span），但不能有块级容器 - 多个
details并列时，浏览器默认各自独立控制，无需 JS 就能实现“单开多关”需额外处理
想让多个面板只展开一个？用 JS 监听 toggle 事件而非 click
toggle 是 details 唯一可靠的原生事件，它在用户交互（点击/空格/回车）触发展开/收起后才派发，且包含 event.target.open 状态标识。用 click 容易误判——比如点击已展开的 summary 时，click 仍会触发，但实际状态未变。
实现单开逻辑的关键点：
- 给所有
details统一加 class，如js-accordion - 监听
toggle，遍历其他同组details，手动设.open = false - 避免重复触发：检查
event.target.open === true再执行关闭逻辑
简短示例：
document.querySelectorAll('.js-accordion').forEach(panel => {
panel.addEventListener('toggle', (e) => {
if (!e.target.open) return;
document.querySelectorAll('.js-accordion').forEach(other => {
if (other !== e.target) other.open = false;
});
});
});
键盘操作不友好？补全 Enter 和 Space 支持
原生 summary 默认支持空格键切换，但部分浏览器（尤其是旧版 Safari）对 Enter 键支持不一致。若测试中发现按 Enter 没反应，不能依赖默认行为。
稳妥做法是主动监听 keydown 并拦截处理：
- 只在
summary上监听，避免影响内容区 - 仅响应
Enter（key === 'Enter'）和Space（key === ' '），注意空格是字符串空格，不是'Space' - 调用
detailsElement.toggleAttribute('open')或直接赋值detailsElement.open = !detailsElement.open - 记得
e.preventDefault()，否则空格可能引发页面滚动
不需要重写整个交互逻辑，只是兜底增强。
动画卡顿或闪跳？别用 max-height 过渡，改用 content-visibility + height 配合
靠 max-height 实现展开动画是常见陷阱：初始设 max-height: 0，展开时设为固定大值（如 500px），但内容高度不确定时，要么动画不精准，要么出现明显闪跳。CSS transition 对 height: auto 也无效。
更可控的做法：
- 用 JS 测量内容区
scrollHeight，动态设置height - 过渡属性只作用于
height和opacity，避免max-height - 配合
content-visibility: hidden（现代浏览器）减少渲染压力，收起时真正卸载内容 - 动画结束回调里重置
height为auto，保证后续 JS 计算准确
这比纯 CSS 方案略重，但交互反馈真实，尤其在内容高度差异大时优势明显。
细节容易被忽略：动画时间要和 JS 的 offsetHeight 读取时机对齐，否则第一次展开可能读到 0；content-visibility 在 Safari 中支持较晚，需降级 fallback。
