open是布尔属性，存在即展开，写open="false"仍展开；JS应直接操作el.open属性，监听toggle事件，CSS用details[open]选择器。
open 属性只管初始状态，存在即展开、不存在即收起；写 open="false" 不会收起，反而强制展开——这是最常翻车的地方。
为什么 open="false" 会让面板展开
因为 open 是布尔属性，浏览器只检测它“有没有被写在 HTML 里”，不解析等号右边的值。只要写了 open=，不管后面是 "false"、"" 还是 "banana"，都算“存在”，于是强制展开。
-
<details open>→ 展开 -
<details open="">→ 展开 -
<details open="false">→ 展开（⚠️常见误写） -
<details>→ 收起（正确默认写法）
JavaScript 动态控制 open 的正确姿势
必须直接读写 DOM 元素的 open 属性，它是反射属性，和视觉状态实时同步。别碰 setAttribute。
- ✅ 正确：
el.open = true、el.open = false、console.log(el.open) - ❌ 错误：
el.setAttribute('open', 'false')→ 实际触发展开 - ❌ 错误：
el.hasAttribute('open') !== el.open：前者查 HTML 源码，后者查运行时状态；JS 修改后，HTML 属性不会自动更新
监听展开/收起变化只能用 toggle 事件
details 没有 change 事件，click 也不可靠（比如键盘空格触发时不派发 click）。唯一能准确捕获状态变更的，是 toggle 事件。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
el.addEventListener('toggle', () => console.log('当前状态:', el.open)) - ❌ 错误：监听
change、click，或轮询el.open - 注意：
toggle在 Chrome 12+、Firefox 49+、Safari 15.4+ 均支持；IE 完全不支持，需做特性检测降级
CSS 响应状态要用 details[open] 选择器
不能靠 class 切换，也不能用 :checked 或 :has()。CSS 只认 details[open] 这个属性选择器，它能响应 DOM 属性变化（哪怕 JS 修改了 el.open，样式也会即时更新）。
- 隐藏原生箭头：
summary::-webkit-details-marker { display: none; } - 自定义图标：
details summary::before { content: "▶ "; }+details[open] summary::before { transform: rotate(90deg); } - 动画展开：用
max-height过渡，而非height（原生不支持height动画）
真正容易被忽略的是：JS 修改 el.open 后，hasAttribute('open') 仍返回旧值，而 details[open] 却能立刻响应——混用这两条路径，状态判断就会错乱。
