open是布尔属性，仅存在即生效，写成open="true"等错误形式会导致失效；summary必须为details首个子元素，否则Safari等浏览器可能静默失效。
open 属性就是默认开启的唯一标准写法，没有“技巧”，只有是否写对。
为什么加了 open 还是默认收起？
最常见原因是属性值写成了 open="true" 或 open="open"。原生 open 是布尔属性，只看是否存在——只要标签里有这个单词，就生效；加任何值反而可能被浏览器忽略或误判。
- ✅ 正确：
<details open><summary>标题</summary>内容</details> - ❌ 错误：
<details open="true"></details>、<details open=""></details>、<details open="1"></details> - 注意：
<summary></summary>必须是<details></details>的第一个子元素，否则即使写了open，部分浏览器（尤其是 Safari）也会静默失效，渲染成普通文字
open 和 JS 控制状态的冲突点
用 JS 赋值 el.open = false 会立刻收起，但不会触发 toggle 事件；反过来，用户点击后状态变了，el.open 会同步更新，但你没监听 toggle 就感知不到。
- 页面加载后想默认展开某一项？直接写
open属性，别等 JS 执行再赋值 - 需要响应展开/收起动作？必须监听
toggle事件，不是click - 多个面板要做手风琴效果？
open属性本身不提供互斥逻辑，得用 JS 移除兄弟节点的open属性
默认开启时样式适配要注意什么？
所有基于展开态的 CSS 都该用 details[open] 选择器，而不是靠 JS 加 class。但有几个实际限制容易翻车：
立即学习“前端免费学习笔记（深入）”；
-
summary::marker在 Safari 中支持极差，哪怕写了open，图标也可能不旋转——统一用summary::before+details[open] summary::before控制更稳 - 不要给
details设height: auto或transition: height，内容高度是动态计算的，CSS 过渡会直接失效 - 如果父容器用了
display: flex，summary可能被拉伸变形，加align-self: flex-start或包一层<div> 更可靠 <p>真正麻烦的从来不是“怎么默认展开”，而是展开之后的视觉一致性、键盘焦点行为、以及 Safari 对伪元素的反复横跳——这些没法靠一个 <code>open解决，得一个个补。
