open是“存在即展开”的布尔标记，仅检测属性是否存在；js应直读直写el.open，监听toggle事件；css用details[open]而非:open伪类。
open属性不是开关，是“存在即展开”的布尔标记
open 属性不接受任何值，写成 open="false" 或 open="0" 会触发展开而非收起——浏览器只检测属性是否存在，不解析其字符串内容。真正有效的写法只有两种：<details open></details>（展开）和 <details></details>（收起）。常见误写如 <details open="false"></details> 实际等效于 <details open></details>，这是绝大多数人第一次用就踩的坑。
JavaScript 控制 open 状态必须直读直写 el.open
DOM 元素的 open 属性是反射属性（reflected property），与视觉状态实时同步。操作时应直接赋布尔值：
-
el.open = true→ 展开，触发toggle事件 -
el.open = false→ 收起，同样触发toggle事件 -
console.log(el.open)→ 返回当前真实状态（true或false）
绝对避免：el.setAttribute('open', 'false')（强制展开）、el.hasAttribute('open')（返回 HTML 属性存在性，不反映 DOM 状态）。
监听状态变化只能用 toggle 事件，不是 click 也不是 change
details 元素没有 change 事件；给 summary 绑 click 会漏掉键盘操作（空格/回车）和 JS 主动赋值的场景。唯一可靠方式是监听元素自身的 toggle 事件：
details.addEventListener('toggle', () => {
console.log('当前是否展开？', details.open);
});
注意：toggle 在页面加载时（哪怕带 open 属性）不会触发，只响应状态变更；且无法被 preventDefault() 阻止。
CSS 响应展开态必须用 details[open]，不是 :open 伪类
虽然部分新版本浏览器支持 details:open，但主流兼容写法仍是属性选择器 details[open]。它能稳定匹配所有已展开的 details 元素，且无需 JS 干预：
- 隐藏原生箭头：
details summary::marker { content: "" } - 自定义展开图标：
details[open] summary::after { content: "▲" } - 控制内容区域过渡：
details:not([open]) .content { max-height: 0; overflow: hidden; }+transition: max-height 0.3s ease
真正容易被忽略的是：CSS 的 details[open] 响应的是 DOM 属性变化，而 JS 中的 el.hasAttribute('open') 检查的是 HTML 字符串属性——两者不同步，混用会导致逻辑错乱。
