标签原生支持折叠展开，无需JavaScript；必须以为首个子元素，用::before伪元素自定义箭头最兼容；JS应操作open属性并监听toggle事件；IE不支持需降级处理，无障碍需保留语义与焦点。
<details></details> 标签本身不会“导致”展开收起问题——它就是干这个的。真正出问题的地方，是误把它当普通容器用、强行加 onclick、或在不支持环境里硬上。
为什么给 <details></details> 绑 onclick 会崩
这不是写法“不够酷”，而是直接破坏浏览器原生行为：
- 屏幕阅读器收不到
aria-expanded状态变更，用户完全不知道内容已展开 - 键盘用户按空格/回车没反应（
<summary></summary>原生支持，但你绑了onclick就覆盖掉了） -
toggle事件监听失效，后续 JS 逻辑（比如统计、联动）全部断掉
正确做法只有一条：details.addEventListener('toggle', handler)。它在 Chrome/Firefox/Safari/Edge 新版中稳定触发，且涵盖鼠标和键盘操作。
max-height 过渡动画卡住或截断内容
想加滑动效果？别设 max-height: 0 → auto，CSS 不支持 auto 过渡，结果就是跳变。
立即学习“前端免费学习笔记（深入）”；
- 展开前先读
content.scrollHeight，设为具体像素值（如240px） - 过渡结束后再设
max-height: 0并同步加overflow: hidden - 避免填个夸张值（如
9999px），否则影响getBoundingClientRect()和滚动条渲染 - 内容含未加载图片时，
scrollHeight可能不准，需在img.onload后重新测量
IE 或旧 Safari 里 <details></details> 完全不工作
IE 所有版本原生不支持；Edge 12–18 无 toggle 事件；Safari ≤15.4 嵌套 <details></details> 渲染异常。
- 用
'open' in document.createElement('details')检测原生支持 - 不支持时，降级为
max-height+aria-expanded手动方案，DOM 结构不用大改 - 别引入 polyfill——多数项目只需兼容到 Edge 79+ 和 Safari 16+，手写 20 行 JS 更轻量可控
手风琴效果（互斥展开）无法靠 <details></details> 自带机制实现
<details></details> 之间完全独立，没有内置状态协调。所谓“点击一个、其他收起”，必须靠 JS 管理。
- 不能依赖
open属性双向绑定——它只是 DOM 状态反射，不是响应式数据 - 推荐在父容器上用
data-active-id记录当前展开项 ID - 每次点击新面板时，先遍历所有
<details></details>设open = false，再设目标为true - 如果内容异步加载，注意防抖
toggle事件，避免重复触发状态切换
最常被忽略的点：状态持久化。浏览器不保存 open 状态，刷新即丢。要用 localStorage 存每个 details[data-collapse-id] 的布尔值，而不是靠 DOM 索引——SSR 或动态渲染下索引会漂移。
