直接用 <details> + <summary> 是零基础最稳起点，天然支持键盘和读屏器；避免 onclick + div 写法，因其存在焦点不可达、无障碍信息缺失、aria-expanded 同步易错三大问题。
直接用 <details> + <summary>，别写 JS、别套 div、别碰 display 切换——这是零基础最稳的起点，而且天然支持键盘和读屏器。
为什么不用 onclick + div 是关键第一步
新手常抄到这种写法：<div onclick="toggle()">展开</div><div id="content">…</div>。它看起来能动，但实际埋了三个雷：
- 按 Tab 键焦点跳不过去，键盘用户根本点不了
- 屏幕阅读器念不出“这个能点开”，也读不出当前是展开还是收起
- JS 里一不小心漏掉
aria-expanded同步，Lighthouse 直接标红“可访问性失败”
<details> 自带这些能力：空格/回车触发、自动加 aria-expanded、焦点管理、默认箭头图标。你只要写对结构，就已达标 WCAG 2.1。
最简可用代码长什么样
复制粘贴就能跑，不需要任何额外 CSS 或 JS：
立即学习“前端免费学习笔记（深入）”；
<details> <summary>点击展开</summary> <p>这里是隐藏的内容，可以是段落、列表，甚至嵌套的 <strong>强调文本</strong>。</p> </details>
注意两个硬规则：
-
<summary>必须是<details>的第一个子元素，否则不响应点击 - 里面不能直接放
<h2>这类标题，会破坏文档大纲；如需标题，改用<summary><h3>FAQ</h3></summary>
想改箭头或加图标？别乱动 display
默认箭头在 Chrome/Firefox 可用 summary::marker 控制，在 Safari 得靠 summary::before。常见翻车点：
- 给
<summary>加display: flex后，内部 SVG 图标和文字错位——改用display: inline-flex或纯 CSS 对齐 - 用
float清除箭头，结果::marker跑偏——改用list-style: none配合summary::before - 设了
user-select: none，触屏长按直接选中文字——删掉这行，它对交互没用
加 SVG 图标的推荐写法：
<details>
<summary>
<svg width="16" height="16" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>
更多信息
</summary>
<p>…</p>
</details>
需要动画？先确认你真需要
<details> 不支持 height 过渡——因为高度是自动计算的，CSS 拿不到具体数值。强行加 transition: height 会失效或抖动。
如果非要动画，有两个现实选择：
- 用
max-height+overflow: hidden拼过渡（值得设大一点，比如max-height: 500px），但内容超限时会被截断 - 放弃原生
<details>，改用<button>+aria-expanded+ JS 控制max-height，同步更新三处状态：classList、aria-expanded、hidden属性
多数情况下，“无动画但语义正确 + 键盘可用”，比“有动画但读屏器念不出来”更重要——尤其当你刚起步时，先把结构做对，比效果炫酷更关键。
