summary必须是details的第一个子元素，且不能有空格或换行；需语义明确、支持读屏；自定义箭头须用::marker并清空原生标记；监听toggle事件而非click。

summary 必须是 details 的第一个子元素

不是“加在哪儿都行”，而是浏览器强制要求 summary 必须紧贴 details 开始标签后、不能有任何其他节点（包括空格、换行、p、div 等）。否则点击无效，甚至被完全忽略。

常见错误写法：

<details><p>说明文字</p>
  <summary>点我展开</summary></details>

正确写法只有一种结构：

<details><summary>点我展开</summary><p>折叠的内容</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="overflowclass">HTML Text Extract</a>
													<p class="overflowclass">从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</details>

• 哪怕中间只有一个换行符或空格文本节点，在 Safari 中也可能导致焦点丢失或箭头样式异常
• 不能用 display: flex + order 在视觉上“假装”它在前面——语义和交互已失效
• 想在标题旁加图标？直接写进 summary 里：
  日志 ▶
  ，再用 CSS 控制旋转

summary 文本必须语义明确，不能只靠图标

summary 的文本内容会被屏幕阅读器当作控件名称朗读，比如 VoiceOver 会说：“系统日志(12 条)，折叠按钮”。模糊文案如“更多”“点击查看”会让残障用户完全不知道点开后是什么。

• 避免纯图标：
  ❓
  —— 没文字，读屏器就只报“折叠按钮”
• 推荐写法：
  API 响应示例（JSON 格式）
• 动态更新标题时（如展开后改为“收起”），必须同步改 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 下就可能点不动、看不见、听不清——这不是“看起来差不多”，而是功能层面的失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！