summary必须是details的直接且首个子元素，否则失效；默认不展开需用open布尔属性；监听用toggle事件；无障碍需防文本重复朗读；样式定制应避免破坏原生箭头和语义。

summary 元素必须作为 details 的第一个子元素

summary 不是独立可用的标签，它只在 details 内部生效，且必须紧接在 details 开始标签之后。如果中间插入了空格、注释或任何其他元素（哪怕只是  ），浏览器会自动忽略它，导致点击无反应或显示为普通文本。

常见错误现象：
– 点击标题没反应，展开内容始终可见
– 控制台无报错，但 summary 渲染成纯文本，不带小三角图标
– 在 Safari 中完全不触发折叠逻辑

• 确保 summary 是 details 的**直接且首个子节点**
• 避免在
  之间写换行或空格（虽然部分浏览器容忍，但 Safari 严格）
• 不要用 CSS 把 summary 设置为 display: block 或覆盖 list-style，这会干扰原生箭头渲染

details 默认展开要用 open 属性，不能靠 JS 模拟

想让折叠块默认打开，必须显式写 open 布尔属性：

标题

...

。仅用 JS 设置 details.open = true 或添加 open 类名都无效——浏览器只认原生属性是否存在。

使用场景：
– 页面加载时需默认展开 FAQ 第一项
– 后端模板根据状态动态输出 open 属性
– SSR 渲染中避免水合后闪烁（JS 补开会导致内容先收再展）

• open 是布尔属性，写 open=""、open="open" 或 open="true" 效果一致，推荐简写 open
• 移除 open 属性即关闭，用 removeAttribute('open')，不是设为 false
• 监听展开/收起用 toggle 事件，不是 click： details.addEventListener('toggle', () => { ... })

summary 里的内容会被读屏器朗读两次

这是实际无障碍测试中高频出现的问题：summary 文本既作为可点击控件被朗读一次，又在展开后作为内容一部分再被朗读一次。对视障用户造成冗余干扰。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

原因在于，浏览器把 summary 同时视为控件（control）和内容（content），而 ARIA 规范建议控件文本不应重复出现在其控制的内容里。

• 解决方案：在 summary 内用 aria-hidden="true" 隐藏文字，再用 aria-labelledby 让内容区关联一个不可见的标题 ID
• 更轻量做法：保持结构简洁，确认内容区首句不重复 summary 文本（例如 summary 写“配置说明”，内容开头别再写“配置说明：……”）
• 不要给 summary 加 role="button"——它已经是可访问按钮，加了反而破坏语义

样式定制要绕过 user-agent 样式重置

各浏览器对 summary 有强默认样式（如 Chrome 强制 list-style: none + 小箭头伪元素），直接写 summary { font-weight: bold; } 可能失效，尤其箭头图标消失或错位。

性能影响：过度用 ::marker 或 ::before 覆盖原生箭头，可能触发重排；Safari 对 summary::marker 支持不稳定。

• 改字体、颜色、padding 安全，但避免动 display、margin（尤其左右 margin）
• 自定义箭头建议用 summary::after + content: "▶"，并配合 details[open] summary::after { content: "▼"; }
• 禁用原生箭头统一写法：summary::-webkit-details-marker { display: none; }（Chrome/Safari），Firefox 需额外处理 summary::marker { display: none; }

原生折叠最麻烦的从来不是写法，而是跨浏览器对 summary 语义边界的理解差异——有的当控件，有的当标题，有的连 toggle 事件都不抛。动手前先在 Safari、Firefox、Edge 里点三遍，比查文档管用。

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