HTML怎么显示常见问题入口_HTML折叠FAQ快速跳转【技巧】-html教程-PHP中文网

原生 html 可用和实现无 js 的折叠 faq，需确保为双标签、直接包裹且首个子元素，并用 open 属性控制默认展开；滚动定位不准时须先设 element.open = true 再调用 scrollintoview，并配置 { block: 'nearest', inline: 'start' } 及 scroll-margin-top 补偿；批量切换需用 js 遍历 details 并取反 open 状态；seo 和可访问性要求内容不被 css 隐藏、含语义化问句、避免纯图标无 aria-label。

html怎么显示常见问题入口_html折叠faq快速跳转【技巧】

怎么用 `<details></details>` 实现点击展开的 FAQ

原生 HTML 就支持折叠 FAQ，不用 JS 也能做，关键就是 <details></details> 和 <summary></summary>。浏览器兼容性现在很稳（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+），移动端也完全可用。

常见错误是把 <summary></summary> 写成闭合标签（比如 <summary></summary>），它必须有开始和结束标签，否则内容不显示；另外 <details></details> 默认展开要用 open 属性，不是 opened 或布尔值字符串。

<details></details> 必须直接包裹 <summary></summary> 作为第一个子元素，其他内容跟在后面
多个 FAQ 并列时，每个 <details></details> 独立控制，互不影响
如果想默认全部收起，就别加 open；想默认展开第一个，只给第一个加 open

<details><summary>Q：HTML 怎么让文字可折叠？</summary><p>A：用 <details> + <summary>，原生语义化方案。</p>
</details>

为什么 `scrollIntoView` 跳转 FAQ 后经常不准

FAQ 列表长了，用户点标题跳转到对应 <details></details> 时，经常卡在顶部以下一截，或被固定导航栏挡住——这不是 bug，是 scrollIntoView 默认行为没配对。

根本原因是：未展开的 <details></details> 高度为 0，scrollIntoView 按“当前渲染尺寸”计算位置，等滚动完它才展开，视觉就偏了。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

必须在调用 scrollIntoView 前确保目标已展开（element.open = true）
推荐用 { block: 'nearest', inline: 'start' }，避免强行滚到顶部干扰阅读流
如果页面有 position: sticky 导航栏，加上 scroll-margin-top 补偿偏移，比如 details { scroll-margin-top: 80px; }

如何让多个 FAQ 同时展开/收起（不依赖 JS 框架）

纯 HTML 不支持批量控制，但可以用极简 JS 绑定按钮，关键是复用 DOM 方法，不重复查节点。

容易踩的坑是：用 querySelectorAll('details') 后直接遍历设 open = true，结果所有都展开，但用户其实只想「展开未开的，收起已开的」——这时候该用切换逻辑。

用 document.querySelectorAll('details') 获取全部，再用 .forEach() 遍历
判断当前状态：if (el.open) { el.open = false; } else { el.open = true; }
绑定按钮时，加 type="button"，防止表单意外提交

<button type="button" onclick="toggleAll()">切换全部</button>
<script>
function toggleAll() {
  document.querySelectorAll('details').forEach(el => {
    el.open = !el.open;
  });
}
</script>