HTML步骤指引怎么折叠展开？操作手册排版-html教程-PHP中文网

是操作手册最佳方案，因其原生支持无障碍、焦点管理及aria-expanded同步，无需JS；需用::before定制图标，禁用height/transition，手风琴模式须监听toggle事件并手动滚动定位。

html步骤指引怎么折叠展开？操作手册排版

直接用 <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。