默认收起，需添加 open 属性才能默认展开； 仅支持短语级内容，禁用块级元素；无脚本下无法批量控制开关，必须用 js 实现全局操作。
能实现，但折叠状态无法持久，且默认展开逻辑要靠 HTML 结构控制，不是靠 JS。
为什么 <details></details> 默认是收起的，怎么让它默认展开
浏览器原生行为就是默认收起，这是规范定义的。要默认展开，必须显式添加 open 属性：
<details open><summary>点击展开/收起</summary><p>这里是被折叠的内容</p> </details>
没有 open 就一定收起；加了就一定展开——没中间态，也不依赖 CSS 或 JS。别试图用 style="display: block" 强行显示内容，那会破坏语义和可访问性。
<summary></summary> 里能放什么，哪些写法会出问题
<summary></summary> 只允许包含 phrasing content（短语级内容），比如文字、<span></span>、<em></em>、<code>，但不能嵌套块级元素，例如 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/2368" title="GradPen论文"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/176205362871906.png" alt="GradPen论文" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/2368" title="GradPen论文" class="overflowclass">GradPen论文</a>
<p class="overflowclass">一款AI论文写作工具，主要用于GradPen是一款AI论文智能助手，深度融合DeepSeek，为您的学术之路保驾护航，祝您写作顺利！，适合需要提升相关任务效率的用户。</p>
</div>
<a rel="nofollow" href="/ai/2368" title="GradPen论文" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<div>、<code><h3></h3>：
- ✅ 正确：
<summary>配置说明 <code>--verbose - ❌ 错误：
<summary><h3>常见问题</h3></summary>（<h3></h3>是块级，会触发浏览器自动修复，可能移出<summary></summary>） - ⚠️ 注意：图标类内联 SVG 可以，但得确保根元素是
<svg></svg>且设了display: inline，否则可能换行或撑开高度
无脚本下如何模拟“全部展开/收起”功能
纯 HTML 没法批量控制多个 <details></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></details> 支持键盘操作：聚焦 <summary></summary> 后按 Space 或 Enter 切换状态，屏幕阅读器也会正确播报“已展开”/“已折叠”。但要注意两点：
- 别给
<summary></summary>加tabindex——它默认可聚焦，加了反而可能重复聚焦 - 如果内部有
<input>或<button></button>，收起时它们仍存在于 DOM 中，只是不可见，不会被跳过；若想真正移除交互，就得用 JS 控制渲染 - 某些旧版 Safari 对
<summary></summary>内部的<button></button>点击事件捕获异常，建议避免在 summary 里放可点击控件
最常被忽略的是：折叠内容里的链接、表单控件，在收起状态下依然能被键盘 Tab 访问到——这不是 bug，是规范行为，因为 DOM 未移除。如需完全禁用，只能上 JS。
