原生 和 标签5秒实现可访问折叠面板，自动处理键盘焦点、aria状态和dom可信源，无需js；但需注意兼容性、嵌套限制及自定义图标技巧。
直接用 <details></details> 和 <summary></summary>，不写 JS、不装库，5 秒就能跑通一个可访问的折叠面板。
为什么不用自己写 JS 控制 display 或 class
手动切换 display: none 或增删 is-open 类，看似灵活，实则漏掉三件事：键盘焦点管理（Tab 键无法进入内容）、屏幕阅读器识别失败（没 ARIA）、状态同步易出错（比如点击后 JS 报错导致 UI 和状态不一致）。而 <details></details> 浏览器原生处理所有这些——空格/回车可触发、自动加 aria-expanded、状态由 DOM 属性 open 单一可信源驱动。
-
<summary></summary>必须是<details></details>的第一个子元素，否则点击无效或触发错位 - 不支持
display或height的 CSS 过渡动画，想滑动展开得另配max-height+ JS - IE 和 Android 4.4 及更早 WebView 完全不支持，需降级方案（如用
<div> + <code>data-state+ 简单 JS）<details></details>的 open 属性怎么用才不翻车open是布尔属性，存在即为真，不存在即为假；它不是字符串值，别写成open="false"或open="0"——那样反而会生效。默认收起是常态，只在明确需要首屏可见时才加。- 默认展开：
<details open><summary>标题</summary>内容</details> - JS 动态控制：
el.open = true或el.toggleAttribute('open')，比操作 class 更可靠 - 注意：多个
<details></details>不能靠同名name实现手风琴互斥（该行为未被标准采纳，仅 Safari 实验性支持，勿依赖）
自定义箭头图标时，
::marker和::before怎么选summary::marker是语义上最正统的方式，但 Safari 对它的样式控制力极弱（比如无法 rotate），Firefox 和 Chrome 支持稍好。实际项目中更推荐用summary::before—— 兼容稳、动画顺、图标随心换。- 清除原生箭头：
summary { list-style: none; } - 收起态图标：
summary::before { content: "▶"; } - 展开态旋转：
details[open] summary::before { transform: rotate(90deg); } - 别忘了加
transition: transform 0.2s，不然旋转突兀
嵌套
<details></details>能不能用能，但有限制：Chrome 和 Firefox 支持良好，Safari 在某些旧版本（≤16.4）里会出现内层无法点击或状态不同步的问题。如果只是两层 FAQ 嵌套，问题不大；但若三层以上、或嵌套里还带表单/视频等复杂内容，建议拆成独立组件或改用 JS 方案。
- 合法结构：
<details><summary>一级</summary><details><summary>二级</summary>…</details></details> - 避免在
<summary></summary>内放<button></button>或<a></a>，会干扰默认 click 行为 - 嵌套时，外层
open属性不会影响内层状态，各自独立
真正容易被忽略的是：哪怕只用原生标签，也得检查焦点顺序和键盘操作是否自然——比如按 Tab 进入
<summary></summary>后，回车/空格是否如预期展开，再按一次是否收起。这点不测试，无障碍就等于没做。 - 默认展开：
