原生无单开手风琴逻辑，纯css无法实现同级互斥；需用max-height过渡模拟动画，重置summary箭头应兼容各浏览器，移动端应设display: block+padding扩点击区，复杂交互需js增强。
details和summary默认就是手风琴，但“单开”是错觉
原生<details></details>之间互不影响，点一个开、另一个不会自动关——所谓“手风琴效果”只是因为多数人只放一个<details></details>，或者没注意其他项仍开着。浏览器不提供“同级互斥”的 CSS 机制，:has()目前也还不能跨兄弟节点判断状态，所以纯 CSS 实现真·单开手风琴不可能。
用max-height过渡模拟展开动画，别碰height
<details></details>内容区高度是动态的，直接对height加transition无效，会跳变或不动。必须用max-height配合overflow: hidden来骗浏览器做插值过渡。
-
details默认闭合时设max-height: 0，同时padding和opacity一起过渡更自然 -
details[open]里设一个足够大的max-height（比如500px），确保内容完全可见 - 如果内容实际高度超过预设值，会被截断——得估个安全上限，或改用 JS 动态测高
- 别给
summary设height或min-height，容易压歪原生箭头定位
重置summary箭头的兼容写法，别只靠::marker
summary::marker在 Safari 15.4+ 才稳定支持，Chrome/Firefox 虽支持但行为不一，IE 完全不认。光写summary::marker { content: "" }在旧 Safari 里没用。
- 先统一清掉原生样式：
summary { list-style: none; appearance: none; } - 再用
summary::before或summary::after加自定义符号（如"▶"） - 旋转动画靠
details[open] summary::after { transform: rotate(90deg); } - Firefox 不支持
summary::before，所以建议统一用::after+details[open] summary::after双保险
移动端点击区域太小？别调line-height
summary默认是行内元素，手机上点不准很常见。调line-height容易导致文字上下偏移、箭头错位，还可能影响屏幕阅读器聚焦框位置。
- 把
summary设为display: block，再加padding扩展热区最稳妥 - 加
cursor: pointer能提升 iOS Safari 的点击反馈感知 - 避免给
summary套div或span——破坏语义，键盘空格/回车失效 - 若内容含链接或表单控件，收起时它们仍存在于 DOM，但不可聚焦；需要自动聚焦就得监听
toggle事件手动.focus()
<details></details>只负责最基础的开关逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
