首选因其原生支持状态管理、键盘可访问、屏幕阅读器兼容，且无需JS即可实现折叠展开；必须为首个子元素，否则失效；默认展开用open属性；隐藏三角图标可用summary::marker{display:none}但Safari支持差；滑动动画需配合max-height与JS动态计算scrollHeight并清理行内样式。

是实现章节内容折叠展开最直接、语义最清晰的方案，不需要写 JavaScript 就能工作，键盘可访问，屏幕阅读器也认得。

为什么首选

而不是自己写 JS 切换 display

它原生支持状态管理，浏览器自动维护 open 属性；用户按空格或回车就能触发，不用额外加 tabindex 或 role；也不用担心点击穿透、焦点丢失或移动端 touch 事件没绑对。自己用 element.style.display = "none" 容易覆盖 CSS 文件里的关键样式，后续调试难定位。

必须是

的第一个子元素

常见错误现象：

说明文字

HTML Text Extract

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

下载

标题

—— 这样点击完全没反应，因为规范强制要求

是首个子节点。

• 正确写法：
  第一章：入门

  正文内容...
• 默认展开加 open 属性：
  第二章：进阶

  ...
• 想隐藏原生三角图标？用 summary::marker { display: none; }，但 Safari 支持差，稳妥做法是加 summary::before 自定义箭头并控制旋转

要滑动动画就得放弃原生逻辑，改用 max-height + JS

原生

只有显隐切换，没有“滑出”效果。CSS 的 transition 对 height: auto 无效，所以必须靠 max-height 模拟。

• 初始状态设 max-height: 0; overflow: hidden;
• 展开时不能写死一个固定值（比如 max-height: 500px），否则内容少时会“弹跳”；应 JS 读取 scrollHeight 后赋值
• 收起后建议清空行内 max-height（设为 ''），否则下次再展开可能拿错高度
• 如果章节内容会动态加载（比如异步插入 DOM），记得在插入后重新测量 scrollHeight

真正容易被忽略的是：当多个章节共存时，

之间互不影响，但如果你用 JS 控制 max-height，就必须手动处理“只展开一个、其余收起”的联动逻辑——这个状态管理不在 HTML 原生能力范围内。

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