details标签的open属性是布尔属性，仅通过存在与否控制展开状态；写open即展开，不写则收起；open="true"或open="false"均非法，且后者仍会触发展开。
details 标签的 open 属性是布尔属性，有即展开，无则收起
它不接受 true 或 false 字符串值，也不支持 open="false" 这种写法。浏览器只认是否存在该属性本身——只要写了 open，面板就默认展开；删掉它，就默认收起。
常见错误是写成 <details open="true"> 或 <details open="false">，这两种写法在语义上都不合法，且后者实际仍会触发展开（因为只要存在 open 属性，无论值是什么，都等价于 open）。
-
<details>...→ 默认收起 -
<details open>...→ 默认展开（推荐写法） -
<details open="">...→ 也展开，但冗余，没必要 -
<details open="false">...→ 依然展开，容易误导人
用 JavaScript 动态控制 open 属性时，别直接赋值字符串
JS 操作要走 DOM 的布尔属性逻辑：用 element.open = true/false，而不是 setAttribute('open', 'true') 或 removeAttribute('open') —— 后者虽能工作，但不够直观且易出错。
例如：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('details');
el.open = true; // ✅ 正确、语义清晰
el.open = false; // ✅ 收起
// ❌ 避免这样：
el.setAttribute('open', 'true'); // 即使值是 'true'，也等同于存在 open 属性
el.removeAttribute('open'); // 可以，但不如直接赋值 boolean 直观
另外注意：修改 open 属性会立即触发展开/收起动画（如果 CSS 有 transition），无需手动触发事件。
配合 <summary> 使用时，open 不影响 summary 渲染
<summary> 始终可见，不管 details 是否展开。它的内容不会因 open 属性缺失而消失或隐藏——这是常被误解的一点。
典型误用场景：有人以为不加 open 就能让 summary 也不显示，结果发现 summary 还在，只是后面内容没了。这时应该检查 CSS 是否意外设置了 summary { display: none; }，而不是指望 open 控制 summary。
-
<details><summary>标题</summary>正文</details>→ summary 始终显示，正文默认隐藏 -
<details open><summary>标题</summary>正文</details>→ summary + 正文都显示 - summary 的点击行为由浏览器原生处理，不需要 JS 绑定 click 来 toggle
open
兼容性没问题，但 Safari 对 open 的初始状态响应稍慢
所有现代浏览器（Chrome、Firefox、Edge、Safari 12.1+）都支持 open 属性，包括初始渲染时的展开状态。但在 Safari 中，如果页面加载时 JS 立即读取 details.open，可能拿到的是 false（即使 HTML 里写了 open），因为属性解析和渲染完成之间有微小延迟。
稳妥做法是：若需在 JS 中确认初始状态，用 getBoundingClientRect() 或监听 DOMContentLoaded 后再读取，或者直接信任 HTML 中写的 open 存在与否——毕竟它是静态属性，不是运行时计算出来的。
顺带一提：open 是可继承的布尔属性，但它不会通过 CSS inherit 传播，只作用于当前 <details> 元素本身。
