是唯一正确写法；open为布尔属性，只认存在与否；js须用el.open=true/false而非setattribute；css用details[open]选择器；监听toggle事件获取状态变更。
details标签默认展开只写open，多一个字符都错
想让<details></details>一打开就展开，直接加open属性就行——不带等号、不带引号、不带任何值。这是唯一符合 HTML 规范的写法。
常见错误是写成<details open="false"></details>或<details open="true"></details>。这些写法浏览器全当“open属性存在”，结果反而强制展开。HTML 明确把open定义为布尔属性，只认“有没有”，不解析右边写了啥。
-
<details></details>→ 默认收起（el.open === false） -
<details open></details>→ 默认展开（el.open === true） -
<details open=""></details>、<details open="0"></details>、<details open="banana"></details>→ 全部等效于展开，但属于无效写法，别这么用
JS 动态控制必须改el.open，不是setAttribute
用 JS 切换状态时，必须直接读写 DOM 元素的open属性，它返回布尔值，且与渲染状态实时同步。写el.setAttribute('open', 'false')是最常踩的坑：这会让 HTML 属性存在，触发“存在即展开”，结果和你想的完全相反。
- ✅ 正确：
el.open = true、el.open = false、console.log(el.open) - ❌ 错误：
el.setAttribute('open', 'false')、el.getAttribute('open')（返回字符串或null，无法反映真实状态） - ⚠️ 注意：
el.hasAttribute('open')和el.open不等价：初始没写open时两者都是false；但执行el.open = true后，hasAttribute仍返回false（HTML 源码没变）
CSS 响应展开状态只能用details[open]
想根据展开/收起状态改变样式（比如箭头方向、内容高度），必须用属性选择器details[open]。它能响应 DOM 属性变化，零延迟、原生支持。
- ✅ 正确：
details[open] summary::after { content: "▲"; } - ✅ 正确：
details:not([open]) .content { max-height: 0; overflow: hidden; } - ❌ 错误：
details[open="false"]（浏览器根本不解析值）、details.open（open不是 class）
监听状态变化只能用toggle事件
<details></details>没有change事件。用户点击<summary></summary>、键盘按空格/回车、或 JS 修改el.open，都会触发toggle事件，此时读el.open才是最新值。
- ✅ 正确：
el.addEventListener('toggle', () => console.log(el.open)) - ❌ 错误：
el.addEventListener('change', ...)（根本不会触发） - ⚠️ 注意：
toggle在页面首次加载时不触发，只响应状态变更；且event.preventDefault()对它无效
open属性，Safari ≤13.1 可能有初始状态延迟；另外，<summary></summary>里放链接或按钮会默认触发折叠，得靠event.stopPropagation()拦住，否则交互会打架。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
