details标签实现步骤指南需每个步骤独立为details元素，禁用嵌套与summary内交互元素，通过CSS重置间距、添加分隔和自定义箭头，监听toggle事件做状态联动与资源清理。
details 标签本身不支持“步骤指南”语义，但配合合理结构和 CSS，能高效实现分步渐进式展开——关键不是堆功能，而是让每一步可独立触发、状态隔离、视觉连贯。
确保每个步骤都是独立的 details 块
步骤指南的核心是“线性+按需”，不能把全部步骤塞进一个 details 里。每个步骤必须是单独的 details 元素，否则无法逐级展开、状态无法独立控制。
- ✅ 正确：
<details><summary>步骤 1：安装依赖</summary><p>运行 pip install ...</p></details>+ 下一个同级details - ❌ 错误：
<details><summary>开始指南</summary><details><summary>步骤 1</summary>...</details><details><summary>步骤 2</summary>...</details></details>（嵌套不被规范支持，iOS Safari 和微信 X5 内核会点击失效） - ⚠️ 注意：多个
details并列时，浏览器不会自动关闭前一个——如需“单开一栏”，得用 JS 监听toggle事件并手动关掉其他兄弟节点
用 summary 清晰表达步骤意图，禁用交互元素
summary 是用户第一次聚焦的位置，文字必须直指操作目标，且不能包裹 button、a 或带 onclick 的标签，否则原生展开逻辑会被劫持。
- ✅ 推荐写法：
<summary>步骤 2：配置环境变量</summary>（纯文本，语义明确） - ❌ 避免：
<summary><button>步骤 2：配置...</button></summary>（按钮拦截事件，空格/回车键失效） - ? 小技巧：可在
summary内嵌<svg>或图标字体，但不要加tabindex或role="button"，否则破坏屏幕阅读器对summary的角色识别
CSS 控制视觉节奏，避免内容跳动
默认 summary 有 margin-bottom，展开后内容顶部常出现意外空白；同时，多步骤排列时若无视觉分隔，容易混淆层级。
立即学习“前端免费学习笔记（深入）”；
- 重置基础间距：
details > summary { margin: 0; }+details > *:not(summary) { margin-top: 0; } - 添加步骤分隔：
details:not(:last-child) { border-bottom: 1px solid #eee; padding-bottom: 0.8em; } - 自定义箭头更可控：
summary::before { content: "▶"; margin-right: 6px; }+details[open] > summary::before { content: "▼"; }（比::marker兼容性更好） - ⚠️ 别用
max-height做过渡动画——details展开是 layout 触发，强制加transition会导致高度计算错误或闪动
监听 toggle 事件做轻量联动
步骤指南常需记录用户进度、联动高亮导航项或埋点。必须监听 toggle 事件，而不是 click —— 后者捕获不到 JS 主动设置 open 的场景，且在 Safari 中可能重复触发。
- 正确监听：
document.querySelectorAll('details').forEach(d => d.addEventListener('toggle', e => { console.log('步骤', e.target.querySelector('summary').textContent, '现在为', e.target.open); })) - 避免循环陷阱：不要在
toggle回调里执行e.target.open = !e.target.open，这会再次触发toggle，造成死循环 - 兼容兜底：Safari ≤ 15.4 对 JS 设置
open属性有延迟，建议检查：if ('open' in d && !d.hasAttribute('open')) d.open = false
最易被忽略的一点：折叠区里的 <video autoplay>、<iframe> 或定时器不会因收起而暂停。步骤中若有演示视频或实时日志输出，必须在 toggle 事件里手动 pause() 或 clearInterval() —— details 只管显隐，不管运行时逻辑。
