直接添加 open 属性即可让 details 默认展开，无需 js 或 css；summary 内嵌交互元素需阻止事件冒泡；firefox 需手动设置 ::marker 样式；js 应操作 open 属性而非 toggle()。
details 标签默认不展开，怎么让它一打开就展开？
直接加 open 属性就行，这是唯一需要的操作。没有 JavaScript 介入的必要，也不用写 CSS 控制显隐。
常见错误是试图用 style="display: block" 或 visibility: visible 强行显示，这会破坏 details 的语义和原生交互逻辑——比如点击标题时不再切换状态，或者屏幕阅读器无法识别折叠状态。
<details open><summary>标题</summary><p>内容</p></details>- 多个
details可各自独立控制open，互不影响 - 服务端渲染或静态 HTML 中，
open是布尔属性，写出来即为 true，不用赋值open="true"
summary 里放按钮或链接，点击后折叠态不切换怎么办？
因为事件冒泡被子元素（比如 <button></button> 或 <a></a>）拦截了，details 收不到原生点击。
解决方法是给子元素加 onclick="event.stopPropagation()"，或者用 CSS 阻断 pointer-events（仅限纯展示场景）。
- 推荐写法：
<summary>标题 <button onclick="doSomething(); event.stopPropagation()">操作</button></summary> - 避免在
summary里嵌套input、select等可聚焦元素，它们会干扰键盘导航（如 Tab 切换 + Space 切换展开） - 如果必须交互复杂，考虑改用
aria-expanded+ 手动控制的 JS 方案，而不是硬塞进summary
Chrome 和 Safari 表现一致，但 Firefox 里 summary 前的三角图标不显示
Firefox 默认不渲染 summary 的伪元素 ::marker，属于已知兼容性差异，不是 bug。
要统一图标，得手动重置样式，不能依赖浏览器默认。
- 加这段 CSS 就能补上箭头：
details summary::marker { content: "▶"; } - 展开时想变成向下箭头？用
details[open] summary::marker { content: "▼"; } - 注意：不要用
list-style控制，summary不是列表项，该属性无效 - 图标字体（如 Font Awesome）也可用，但需确保字体加载完成，否则可能闪白
用 JavaScript 动态控制 details 展开/折叠，为什么 toggle() 不生效？
因为 toggle() 是非标准方法，只有部分现代浏览器支持（Chrome 120+、Firefox 122+），旧版本直接报 toggle is not a function。
安全做法是直接读写 open 属性，它始终可用。
- 展开：
el.open = true - 收起：
el.open = false - 切换：
el.open = !el.open - 监听变化用
toggle事件（不是change）：el.addEventListener('toggle', () => {...}) - 别忘了加
!el.hasAttribute('open')这类判断来兼容 SSR 渲染的初始状态
summary 时，先测 Firefox 和键盘导航，再调样式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
