是操作手册最佳方案，因其原生支持无障碍、焦点管理及aria-expanded同步，无需JS；需用::before定制图标，禁用height/transition，手风琴模式须监听toggle事件并手动滚动定位。
直接用 <details></details> + <summary></summary> 就是最短路径，不需要写 JS、不担心兼容性丢失焦点，适合操作手册这类强调可读性与无障碍的场景。
为什么<details></details>比手写display: none更稳
操作手册常被屏幕阅读器朗读、或靠键盘导航翻阅，原生 <details></details> 自带 aria-expanded 同步、空格/回车触发、焦点自动管理；而手动切 display 很容易漏掉 tabindex、aria-hidden 或收起后焦点悬空。
-
<summary></summary>必须是<details></details>的第一个子元素，否则点击无反应 - 默认收起，加
open属性即可默认展开：<details open></details> - IE 完全不支持 —— 若真要兼容，先用
'open' in document.createElement('details')检测，再加载降级 JS - 不要给
<details></details>设height或transition，它内部高度是动态计算的，强行过渡会抖动或失效
怎么让<summary></summary>看起来像操作手册里的小标题
浏览器默认的三角图标在 Safari 上不可靠，::marker 支持差，统一用 ::before 控制更稳妥。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 保留
display: list-item（别改成block），否则箭头消失 - 用
list-style: none清掉原生符号，再用summary::before补图标 - 旋转动画靠
transform: rotate(90deg)+transition，展开时加details[open] summary::before - 若内容含图片或视频，
<details></details>展开后不会自动触发 lazy-load，得监听toggle事件手动设loading="lazy"
多个步骤怎么做成“点一个、其他收起”的手风琴
原生 <details></details> 默认互不干扰，要实现单开模式，JS 只需几行，且必须监听 toggle 事件（不是 click），否则键盘操作不触发。
立即学习“前端免费学习笔记（深入）”；
- 遍历所有
<details></details>，对每个绑定toggle监听器 - 触发时，把其他兄弟节点的
open设为false，当前保持或设为true - 别用
querySelectorAll('details').forEach(d => d.open = false)全关 —— 这会打断用户正在操作的项 - 如果某步骤需要默认展开，只对那个加
open，其余不加，避免 JS 多余干预
最易被忽略的是内容高度变化后的滚动行为：用户点开一个长步骤后，页面不会自动滚到顶部，得手动调 element.scrollIntoView({ block: 'start', behavior: 'smooth' })；还有，若步骤里有输入框，收起再展开时焦点和光标位置会丢，得用 focusin 缓存 selectionStart。
