details默认允许多开，需用JS监听toggle事件并手动关闭其他项，禁用click绑定与直接赋值open，配合scrollHeight动态设置max-height实现平滑动画，注意summary内避免嵌套可点击元素及兼容性降级。
用 details 实现单开必须加 JS 控制 open 属性
details 默认允许多个同时展开，这不是 bug，是规范行为。想让它变成“点一个、其他关”，不能只靠 HTML，得监听 toggle 事件并手动干预。
常见错误是绑 click 事件——键盘用户按空格或回车时不会触发，屏幕阅读器同步失败；也别用 .open = false 直接赋值，会再次触发 toggle，导致逻辑错乱。
- 给所有
details加统一 class，比如class="accordion-item" - 监听父容器的
toggle事件（委托），或遍历每个details单独绑定 - 在事件回调里检查
event.target.open === true，再对其他同组项调用.removeAttribute('open') - 动态插入的新
details要重新绑定，或直接监听父级，避免漏处理
max-height 动画里 scrollHeight 是关键，别硬写死数值
原生 details 没有平滑高度动画，要加就得绕开它，改用 div + max-height + transition。但 max-height: auto 不支持过渡，必须设具体值。
写死 max-height: 500px 看似简单，实际容易截断长内容，或让短内容动画拖沓。真正稳的做法是 JS 在展开前读目标区域的 scrollHeight，设为 max-height；收起时设为 0，并始终配 overflow: hidden。
- 展开前先
element.style.maxHeight = '0'，强制重排，再offsetHeight或getBoundingClientRect()触发重绘 - 然后设
element.style.maxHeight = element.scrollHeight + 'px' - 收起时设回
'0'，别忘了加overflow: hidden，否则动画中内容会溢出
别在 summary 里放可点击子元素
summary 是折叠控件的触发区，里面嵌 button、a 或带 onclick 的 span，点击时事件会冒泡，导致意外折叠/收起，或和子元素行为冲突。
常见现象：点菜单里的链接，整个面板却关了；或者点了图标没反应，因为 pointer-events: none 被误加。
- 把按钮移出
summary，放在details内部但兄弟位置（比如标题 内容 - 如果必须放在
summary里，加event.stopPropagation()，但要注意键盘焦点流被破坏 - 避免用
label包裹input再放进summary——label 的 click 行为也会冒泡
Safari 和 WebView 兼容性不是“能用就行”，得真机测
details 在 Safari 15.4+ 才修复 summary 的 focus 样式 bug，旧版点一下就失焦；微信、QQ 安卓 WebView（尤其基于 X5 内核的老版本）可能始终展开、或完全无响应，CSS 重置也无效。
最常被忽略的是：开发时在 Chrome 里一切正常，上线后用户反馈“点不动”，结果发现是某款国产浏览器内核不认 toggle 事件，或把 summary 当普通文本渲染。
- 兼容性要求高时，别押注
details，改用input[type="checkbox"] + label + .content的纯 CSS 方案（需注意 ARIA 补充） - 必须用 JS 方案时，优先检测
'open' in document.createElement('details')，再降级 - 真机测试不能跳过，尤其安卓端微信内置浏览器和鸿蒙系统 WebView
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
