默认收起应省略open属性；open是布尔属性，只要存在即展开；JS控制须用el.open=false或toggleAttribute；CSS仅响应details[open]选择器；IE不支持且无原生过渡动画。
默认不可见，就别写 open —— 这是最简单、最可靠、也最容易被忽略的做法。
为什么 open="" 或 open="false" 反而强制展开
因为 open 是布尔属性（boolean attribute），浏览器只检测它“是否存在”，不解析等号右边的任何值。只要 HTML 标签里出现了 open= 这三个字符，无论后面跟的是 "false"、"0" 还是空字符串，都等价于 open 存在，面板必然展开。
-
<details open>→ 展开 -
<details open="">→ 展开 -
<details open="false">→ 展开（⚠️高频翻车点） -
<details>→ 收起（✅唯一正确默认收起写法）
JS 动态控制时，别用 setAttribute 改 open
用 el.setAttribute('open', 'false') 不仅不会收起，反而会触发展开——因为属性被写入 DOM，存在即生效。真正要改状态，必须操作 DOM 属性本身：
- ✅ 正确：
el.open = false（同步 DOM 状态，触发toggle事件） - ✅ 正确：
el.toggleAttribute('open')（有则删、无则加，语义清晰） - ❌ 错误：
el.setAttribute('open', 'false')（写入后属性存在，强制展开） - ❌ 错误：
el.hasAttribute('open') === el.open（二者不同步：JS 修改open后，hasAttribute仍返回false）
CSS 响应展开状态只能靠 details[open]
不能写 details[open="false"] 或依赖 JS 添加 class。浏览器原生只响应 [open] 这个属性选择器，且它匹配的是 DOM 层面的当前状态（哪怕由 JS 设置），不是 HTML 源码。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
details[open] .content { max-height: 300px; } - ✅ 正确：
details:not([open]) summary::after { content: "▶"; } - ❌ 错误：
details[open="false"]（语法无效，浏览器忽略） - ❌ 错误：
details.closed（没有这个 class，也不推荐手动加）
真正容易被忽略的是：IE 完全不支持 <details>，且所有现代浏览器中，open 属性只管初始状态——它不是实时开关，也不带过渡动画控制权；想做平滑收起，得靠 CSS max-height + transition 配合 [open] 选择器手动实现。
