怎么用HTML的details标签构建一个分步引导教程-html教程-PHP中文网

分步教程需用js控制details的open属性实现顺序引导，不能仅靠html；summary内禁放交互元素，应监听toggle事件而非click，并注意无障碍与滚动焦点管理。

怎么用html的details标签构建一个分步引导教程

details 标签本身不支持嵌套步骤自动展开

直接用 <details></details> 做分步教程，浏览器不会帮你“推进到下一步”——它只是独立的可展开/收起区块。想实现“点击下一步才显示下一项”，得靠 JS 控制 open 属性，不能只靠 HTML。

常见错误是写一堆并列的 <details></details>，结果用户能随意点开任意一步，顺序引导失效。真正可用的分步引导，必须让前一步完成（比如点击“继续”）后，才让下一步可交互或自动展开。

每步用一个 <details></details> 包裹，但初始状态统一设为 open=false
第一步手动加 open 属性，或用 JS 在加载时打开
每个步骤末尾放一个 <button></button>，点击后用 JS 设置下一项的 open = true 并滚动到它
禁用后续步骤的 <summary></summary> 点击（比如加 pointer-events: none），避免跳步

summary 里别放复杂交互元素

<summary></summary> 是触发区域，浏览器对它的内容支持有限。如果在里面塞 <button></button>、<input> 或监听 click 的 <span></span>，在 Safari 和部分旧版 Chrome 中可能无法响应，或者触发两次展开/收起。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

把操作按钮放在 <details></details> 内部、<summary></summary> 外面（即 <details><summary>…</summary><div><button>下一步</button></div></details>）
避免给 <summary></summary> 加 onclick 或 addEventListener('click')
如果需要“展开即聚焦输入框”，要在 toggle 事件后延迟执行 focus()，否则 Firefox 下会失效

用 toggle 事件监听展开/收起状态变化

不能只靠 click 或 change 监听 <details></details>，因为它的状态切换是通过 toggle 事件通知的——这是唯一可靠的方式。

document.querySelectorAll('details').forEach(d => {
  d.addEventListener('toggle', () => {
    if (d.open) {
      console.log('第', Array.from(d.parentElement.children).indexOf(d) + 1, '步已展开');
      // 这里可以发埋点、校验上一步输入、滚动到视口等
    }
  });
});

toggle 事件在用户点击 <summary></summary> 时触发，也适用于 JS 修改 open 属性时（只要不是初始化赋值）
不要在 toggle 里直接改同一个 <details></details> 的 open，否则可能引发循环
移动端 Safari 对 toggle 的触发有时序问题，建议加 requestAnimationFrame 延迟读取 d.open

兼容性与无障碍要注意 summary 的语义

<summary></summary> 默认被屏幕阅读器识别为“可展开控件”，但如果你隐藏了它（比如用 CSS display: none），整个 <details></details> 就失去语义，键盘用户无法用空格/回车触发。也不能用 aria-hidden="true" 掩盖它。

保持 <summary></summary> 可见且可聚焦；如需视觉隐藏，用 position: absolute; clip: rect(1px,1px,1px,1px)
每步的 <summary></summary> 文本要明确，比如写“步骤 2：填写邮箱地址”，而不是“下一步”
Chrome 115+ 支持 details[open]:has(> summary:focus) 这类选择器，但 Safari 完全不支持 :has()，做样式联动时得用 JS 切 class

最麻烦的其实是滚动衔接和焦点管理——用户点“下一步”后，新展开的内容可能被顶部导航栏遮挡，或者键盘焦点没落到预期元素上。这些细节不处理，分步引导就只是个能点开的列表而已。