<details> 默认收起，需添加 open 属性才能默认展开；<summary> 仅支持短语级内容，禁用块级元素；无脚本下无法批量控制开关，必须用 JS 实现全局操作。
能实现，但折叠状态无法持久，且默认展开逻辑要靠 HTML 结构控制，不是靠 JS。
为什么 <details> 默认是收起的，怎么让它默认展开
浏览器原生行为就是默认收起，这是规范定义的。要默认展开，必须显式添加 open 属性：
<details open> <summary>点击展开/收起</summary> <p>这里是被折叠的内容</p> </details>
没有 open 就一定收起；加了就一定展开——没中间态，也不依赖 CSS 或 JS。别试图用 style="display: block" 强行显示内容，那会破坏语义和可访问性。
<summary> 里能放什么，哪些写法会出问题
<summary> 只允许包含 phrasing content（短语级内容），比如文字、<span>、<em>、<code>，但不能嵌套块级元素，例如 <p>、<div>、<h3>：
- ✅ 正确：
<summary>配置说明 <code>--verbose</code></summary> - ❌ 错误：
<summary><h3>常见问题</h3></summary>（<h3>是块级，会触发浏览器自动修复，可能移出<summary>） - ⚠️ 注意：图标类内联 SVG 可以，但得确保根元素是
<svg>且设了display: inline，否则可能换行或撑开高度
无脚本下如何模拟“全部展开/收起”功能
纯 HTML 没法批量控制多个 <details> 的 open 状态——这是根本限制。所谓“无脚本环境”下，就只能接受每个折叠项独立操作。如果真需要全局开关，必须引入 JS，哪怕只有一行 document.querySelectorAll('details').forEach(d => d.open = true)。
有人尝试用 CSS + :has() 模拟，比如：
body:has(.expand-all-btn:active) details { open: true; }
但目前（2024 年中）open 不是 CSS 可设置的属性，:has() 也无法触发 HTML 属性变更，这条路走不通。
可访问性与键盘交互的实际表现
原生 <details> 支持键盘操作：聚焦 <summary> 后按 Space 或 Enter 切换状态，屏幕阅读器也会正确播报“已展开”/“已折叠”。但要注意两点：
- 别给
<summary>加tabindex——它默认可聚焦，加了反而可能重复聚焦 - 如果内部有
<input>或<button>，收起时它们仍存在于 DOM 中，只是不可见，不会被跳过；若想真正移除交互，就得用 JS 控制渲染 - 某些旧版 Safari 对
<summary>内部的<button>点击事件捕获异常，建议避免在 summary 里放可点击控件
最常被忽略的是：折叠内容里的链接、表单控件，在收起状态下依然能被键盘 Tab 访问到——这不是 bug，是规范行为，因为 DOM 未移除。如需完全禁用，只能上 JS。
