summary必须是details的第一个子元素，且不能有空格或换行；需语义明确、支持读屏；自定义箭头须用::marker并清空原生标记；监听toggle事件而非click。
summary 必须是 details 的第一个子元素
不是“加在哪儿都行”，而是浏览器强制要求 summary 必须紧贴 details 开始标签后、不能有任何其他节点（包括空格、换行、p、div 等）。否则点击无效，甚至被完全忽略。
常见错误写法：
<details> <p>说明文字</p> <summary>点我展开</summary> </details>
正确写法只有一种结构：
立即学习“前端免费学习笔记（深入）”；
<details> <summary>点我展开</summary> <p>折叠的内容</p> </details>
- 哪怕中间只有一个换行符或空格文本节点，在 Safari 中也可能导致焦点丢失或箭头样式异常
- 不能用
display: flex+order在视觉上“假装”它在前面——语义和交互已失效 - 想在标题旁加图标？直接写进
summary里：<summary>日志 ▶</summary>，再用 CSS 控制旋转
summary 文本必须语义明确，不能只靠图标
summary 的文本内容会被屏幕阅读器当作控件名称朗读，比如 VoiceOver 会说：“系统日志(12 条)，折叠按钮”。模糊文案如“更多”“点击查看”会让残障用户完全不知道点开后是什么。
- 避免纯图标：
<summary><span aria-hidden="true">❓</span></summary>—— 没文字，读屏器就只报“折叠按钮” - 推荐写法：
<summary>API 响应示例（JSON 格式）</summary> - 动态更新标题时（如展开后改为“收起”），必须同步改
summary.textContent，否则读屏器仍读旧名
自定义箭头要用 ::marker，且必须清两处
不同浏览器对默认三角箭头的实现不一致：Chrome 渲染在右侧、Firefox 在左侧、Safari 有时还残留。只写 list-style: none 不够，必须双管齐下。
- 清除默认样式：
summary { list-style: none; } - 清空原生标记：
summary::marker { content: ""; }（Firefox 和新版 Safari 必需） - 补自定义符号：
summary::after { content: "▶"; margin-left: 6px; } - 状态切换用：
details[open] summary::after { content: "▼"; }，别用:hover或 class 模拟
监听展开状态要用 toggle 事件，不是 click
details 的状态切换由浏览器内部管理，触发方式包括鼠标点击、空格键、回车键、屏幕阅读器指令等。click 事件会漏掉键盘和辅助技术操作，尤其在 Safari 中不可靠。
- 正确监听：
details.addEventListener('toggle', () => console.log(details.open)) -
details.open是实时布尔值，比查 class 或 style 更直接 - 不要在
toggle回调里手动赋值details.open = true，会引发无限循环 - 需要互斥展开（单选）？得用 JS 遍历其他
details并设open = false，原生不支持
最容易被忽略的是：即使你把样式调得再漂亮，只要 summary 不是 details 的首个子元素，或者没处理好 ::marker 兼容性，用户在 Safari 或 VoiceOver 下就可能点不动、看不见、听不清——这不是“看起来差不多”，而是功能层面的失效。
