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 字符串属性——两者不同步，混用会导致逻辑错乱。