首选因其原生支持状态管理、键盘可访问、屏幕阅读器兼容，且无需JS即可实现折叠展开；必须为首个子元素，否则失效；默认展开用open属性；隐藏三角图标可用summary::marker{display:none}但Safari支持差；滑动动画需配合max-height与JS动态计算scrollHeight并清理行内样式。
<details></details> 是实现章节内容折叠展开最直接、语义最清晰的方案，不需要写 JavaScript 就能工作，键盘可访问，屏幕阅读器也认得。
为什么首选 <details></details> 而不是自己写 JS 切换 display
它原生支持状态管理，浏览器自动维护 open 属性；用户按空格或回车就能触发，不用额外加 tabindex 或 role；也不用担心点击穿透、焦点丢失或移动端 touch 事件没绑对。自己用 element.style.display = "none" 容易覆盖 CSS 文件里的关键样式，后续调试难定位。
<summary></summary> 必须是 <details></details> 的第一个子元素
常见错误现象：<details><p>说明文字</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<summary>标题</summary></details> —— 这样点击完全没反应，因为规范强制要求 <summary></summary> 是首个子节点。
- 正确写法：
<details><summary>第一章：入门</summary><div>正文内容...</div></details> - 默认展开加
open属性：<details open><summary>第二章：进阶</summary>...</details> - 想隐藏原生三角图标？用
summary::marker { display: none; }，但 Safari 支持差，稳妥做法是加summary::before自定义箭头并控制旋转
要滑动动画就得放弃原生逻辑，改用 max-height + JS
原生 <details></details> 只有显隐切换，没有“滑出”效果。CSS 的 transition 对 height: auto 无效，所以必须靠 max-height 模拟。
立即学习“前端免费学习笔记（深入）”；
- 初始状态设
max-height: 0; overflow: hidden; - 展开时不能写死一个固定值（比如
max-height: 500px），否则内容少时会“弹跳”；应 JS 读取scrollHeight后赋值 - 收起后建议清空行内
max-height（设为''），否则下次再展开可能拿错高度 - 如果章节内容会动态加载（比如异步插入 DOM），记得在插入后重新测量
scrollHeight
真正容易被忽略的是：当多个章节共存时，<details></details> 之间互不影响，但如果你用 JS 控制 max-height，就必须手动处理“只展开一个、其余收起”的联动逻辑——这个状态管理不在 HTML 原生能力范围内。
