直接在标签中添加open属性即可默认展开，这是唯一合法方式；它为布尔属性，只认属性是否存在，不解析值，故open="true"等写法反而强制展开。
details元素默认不展开，怎么让它一打开就展开？
直接加 open 属性就行，这是唯一合法方式。没有 open="true" 这种写法，也不接受布尔字符串值——只认属性是否存在。
常见错误是写成 <details open="true"></details> 或 <details :open="true"></details>（误当 Vue 模板），其实只要 <details open></details> 就够了。
-
open是布尔属性：存在即为真，不存在即为假 - 服务端渲染或静态 HTML 中，加了就展开；删掉就收起
- 用 JS 动态设置时，必须用
el.setAttribute('open', '')或el.open = true，不能设值为字符串"true"
summary里放按钮或链接会触发两次折叠/展开？
会。因为 <summary></summary> 本身是点击热区，内部再嵌套 <button></button> 或 <a href></a> 时，事件会冒泡到外层 <details></details>，导致默认行为和自定义行为冲突。
解决方法只有两个：
- 给内部可点击元素加
onclick="event.stopPropagation()"（最直接） - 改用纯文本 + CSS 模拟按钮样式，避免语义化交互元素嵌套
别试图用 preventDefault() 拦截 <summary></summary> 的点击——它不是普通事件，而是原生折叠控制机制，拦了就失效。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
Chrome 和 Safari 对 details/summary 的样式支持差异在哪？
主要在伪元素和默认箭头控制上。Safari 仍强制显示右侧小三角（::marker 不可用），Chrome 允许用 summary::marker { content: "▶"; } 自定义，但 Firefox 目前不支持 ::marker。
真正跨浏览器稳定的做法是：
- 用
summary::before插入图标，同时summary::-webkit-details-marker { display: none; }隐藏 Chrome/Safari 原生箭头 - 对 Safari，需额外加
summary { list-style: none; }防止双箭头 - 不要依赖
details[open] > summary::after做状态切换——部分旧版 Safari 不触发重绘
用 details/summary 做多级嵌套面板时要注意什么？
可以嵌套，但浏览器兼容性会降级：iOS 15.4 之前不支持嵌套 <details></details>，点内层 summary 会直接展开外层。
如果必须嵌套，得加防护：
- 每个内层
<details></details>必须有独立的id，方便用 CSS 定位，比如#faq-2 > details - 避免在
<summary></summary>里写大段 HTML（如表格、表单），某些 Android WebView 会卡住或错位 - 服务端若用 SSR 渲染，确保所有嵌套层级的
open属性都显式写出，别靠 JS 补全——首屏渲染时 JS 还没执行
嵌套超过两层后，键盘导航（Tab / Enter）行为在各浏览器中不一致，无障碍测试容易失败，生产环境建议优先考虑 JS 方案。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
