details标签专为零脚本折叠交互设计，但必须严格满足结构规范：summary必须是details的首个直接子元素，否则浏览器静默降级导致点击失效；open属性控制默认展开；toggle事件仅响应用户操作，JS赋值不触发；动画需借助opacity/visibility或JS测量高度实现。
details 标签就是专为这个设计的，不用 JS、不写 CSS 也能跑通，但直接套用容易翻车。
为什么 details + summary 一用就错
最常见问题是结构不合法：summary 必须是 details 的第一个子元素，中间不能插其他标签，也不能用 div 包一层再放 summary。浏览器看到非法结构会静默降级（比如把整个 details 当普通块级元素渲染），箭头消失、点击无反应都由此而来。
- 错误写法：
<details><div><summary>标题</summary></div><p>内容</p></details> - 正确写法：
<details><summary>标题</summary><p>内容</p></details> - 如果要用样式包裹，只能包在
summary内部或details外层，不能插在中间 -
summary里别用display: flex或display: grid，否则箭头可能错位或消失；加align-self: flex-start可救急
怎么让默认状态是展开的
加 open 属性就行，不是 open="true"，也不是 open="open"，就是光秃秃一个 open：
<details open> <summary>默认展开的标题</summary> <p>这里的内容一开始就能看到</p> </details>
- JS 控制也一样：设
el.open = true或el.open = false - 注意：
toggle事件只在用户点击时触发，JS 赋值不会触发它，状态同步得自己记变量 - 批量操作多个面板？别用
document.querySelectorAll('details').forEach(d => d.open = true)—— 部分老 Safari 会卡住，稳妥做法是加个微任务延迟：Promise.resolve().then(() => { /* 批量赋值 */ })
想加展开/收起动画怎么办
原生 details 不支持 CSS 过渡，max-height + transition 会失效，因为高度是自动计算的，CSS 拿不到具体数值。
立即学习“前端免费学习笔记（深入）”；
- 硬要加动画，有两个现实路径：一是用 JS 测量内容高度再设
max-height，二是改用纯 CSS 手风琴（靠input[type=checkbox]+label+~选择器），但后者要求内容高度固定或可预估 - 如果只是需要淡入效果，可以结合
opacity和visibility做“伪动画”，视觉上比突然出现更柔和 - 嵌套使用
details时，旧版 Safari（≤16.4）有焦点丢失 bug，点内层summary可能导致外层意外收起，这种场景建议避免嵌套
IE 或极老安卓 WebView 怎么兼容
IE 完全不支持 details，部分 Android 4.x WebView 也不认。检测方式很简单：
if (!('open' in document.createElement('details'))) {
// 加载降级 JS 方案，或直接显示全部内容
}- 降级方案不必重写整套逻辑，优先用 class 切换 +
max-height，比监听 click + 操作style.display更利于后续加动画 - 无障碍方面，原生
details自带aria-expanded和键盘支持（空格/回车触发），手写方案必须手动补全，否则屏幕阅读器无法识别状态 - 别为了兼容 IE 把所有面板默认展开——那会破坏信息层级，不如干脆在不支持的环境里显示静态 FAQ 列表
真正麻烦的不是写法，而是当设计要求“点击标题区域任意位置都响应”+“内容区有链接/按钮”+“支持键盘 Tab 导航”+“动画必须丝滑”时，details 的边界就立刻露出来了。这时候得接受：原生标签省心，但换不来控制力。
