details标签默认展开靠open布尔属性控制：不写open则默认收起，写open（无论值为何）即默认展开；正确写法仅两种——<details>收起或<details open>展开，open="false"仍强制展开。
details标签默认展开状态怎么控制
靠open属性。不写就是默认收起，写了就是默认展开——但注意，它是个布尔属性，写成open="false"没用，写了就生效，删掉才收起。
常见错误是以为能用open="false"来强制关闭，结果发现面板始终开着。正确做法只有两种：<details>（收起）或<details open>（展开）。
- 服务端渲染时可动态插入
open属性控制初始状态 - 若需响应用户操作再展开，仍得靠 JS 监听
toggle事件，但初始状态纯 HTML 就能定死 - Chrome 和 Firefox 支持良好，但 Safari 旧版本（≤13.1）对
open的初始值处理偶有延迟，建议加summary内文字避免空白闪动
summary里放链接或按钮会触发折叠行为吗
会，而且是默认行为。点击<summary>任意子元素（包括<a>、<button>）都会触发details的展开/收起。
这常导致意外交互：比如想让链接跳转，结果点一下面板先展开了。解决方法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 给链接加
onclick="event.stopPropagation();"阻止冒泡（最轻量） - 把链接移出
<summary>，改用<div>包裹并用 CSS 模拟标题样式（更可控） - 注意：
button若设type="button"不会提交表单，但仍会触发折叠；必须加event.stopPropagation()
如何让多个details共享同一展开状态
HTML 原生不支持联动，details彼此完全独立。所谓“同步展开”必须靠 JS 监听toggle事件手动控制其他节点的open属性。
但如果你只是想视觉上统一管理（比如文档目录），推荐换思路：
- 用单个
<details>包住所有章节，内部用<h3>或<section>分隔，靠 CSS 控制子内容缩进和间距 - 若真要多面板联动，JS 只需监听一个
details的toggle，然后遍历同类节点设.open = event.target.open - 别试图用
id+aria-controls模拟，屏幕阅读器对多details联动无标准支持，反而降低可访问性
无障碍与SEO影响有哪些实际坑点
details/summary语义清晰，对屏幕阅读器友好，但有两个隐藏雷区：
- 搜索引擎抓取时，
details内部内容默认**会被索引**（Google 已明确支持），但部分爬虫可能忽略open为 false 的内容——所以关键信息别只藏在默认收起的面板里 - VoiceOver 在 macOS 上对嵌套
details支持不稳定，二级折叠可能读不出状态变化，建议避免三层以上嵌套 - 用
aria-expanded手动覆盖是徒劳的，浏览器会自动根据open属性同步该属性，强行写死会导致状态错乱
真正要做的，是确保summary文本本身能准确描述折叠内容，而不是依赖 JS 补充提示文字。
