HTML原生<details><summary>可实现无JS的FAQ折叠，需确保<summary>为首个子元素、避免交互控件嵌套、用aria-expanded+hidden保障可访问性，兼容性不足时需JS回退。
用 <details> 和 <summary> 快速实现可折叠 FAQ
现代 HTML 原生支持折叠/展开，不用 JS 就能做干净的 FAQ 列表。<details> 是容器，<summary> 是点击区域，浏览器自动处理展开状态和箭头图标。注意：<summary> 必须是 <details> 的第一个子元素，否则点击无效。
常见错误：把多个 <p> 直接塞进 <details> 却忘了包一层 <summary>，结果整个区块不可交互；或者给 <summary> 加了 display: block 导致默认箭头消失（需用 list-style 或伪元素手动恢复）。
- 每个问题独立用一对
<details></details>包裹，避免嵌套 -
<summary>里可以放文字、图标甚至短链接，但别放交互控件（如按钮），会干扰折叠逻辑 - 加
open属性让某条默认展开：<details open><summary>为什么…</summary><p>因为…</p></details>
兼容性差时用 aria-expanded + 简单 JS 回退
IE 完全不支持 <details>，Safari 旧版本对样式控制有限。如果必须兼容 IE 或需要统一视觉（比如箭头方向、动画），就得手动控制状态。核心是监听 <summary> 点击，切换 aria-expanded 值，并用 JS 显隐内容区。
关键点：不能只靠 display: none/block 切换，否则屏幕阅读器无法感知变化；必须同步更新 aria-expanded 和 hidden 属性。示例逻辑：
立即学习“前端免费学习笔记（深入）”；
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
document.querySelectorAll('summary').forEach(el => {
el.addEventListener('click', () => {
const content = el.nextElementSibling;
const isExpanded = el.getAttribute('aria-expanded') === 'true';
el.setAttribute('aria-expanded', !isExpanded);
content.toggleAttribute('hidden', isExpanded);
});
});
- 初始 HTML 中，
<summary aria-expanded="false">和对应内容区加hidden属性 - 别用
visibility: hidden替代hidden属性——前者仍占布局且屏幕阅读器可能读出 - 动画要用
max-height过渡，直接过渡height无效（因为高度是 auto）
样式定制：覆盖默认箭头与间距
Chrome/Firefox 默认在 <summary> 左侧显示小三角，但位置、颜色、大小没法用常规 CSS 调整。要自定义，得先用 list-style: none 干掉原生箭头，再用 ::before 或 SVG 图标替换。
容易踩的坑：给 <summary> 设 position: relative 后，用 ::after 绝对定位图标，结果 Safari 下图标偏移；更稳的方式是直接在 HTML 里写内联 SVG，或用 background-image 配合 padding-left 控制间距。
- 移除原生箭头：
summary { list-style: none; } - 展开时旋转图标：给图标元素加
transform: rotate(90deg)，配合transition - 内容区顶部留空隙：
details > *:not(summary) { margin-top: 0.5rem; }，避免文字贴边
SEO 和语义化注意事项
搜索引擎能正常索引 <details> 内所有文本，无论是否默认展开。但若整页 FAQ 全部默认收起（没加 open），可能影响首屏关键信息曝光——建议至少第一条设 open，既利于 SEO，也降低用户首次点击成本。
别为了“美观”把 FAQ 改成纯 JS 渲染（比如从 JSON 动态生成），这会让爬虫看不到内容，也增加首屏白屏风险。结构优先用语义化 HTML，样式和交互后置增强。
- 每个
<details>应该有明确的问题文本，避免用“点击查看”这种无意义摘要 - 答案部分用
<p>、<ul>等语义标签组织，别全堆<div> - 如果答案含代码块，用
<pre><code>，别用<textarea>或图片截图
真正麻烦的是内容维护——当 FAQ 条目超过 20 条，手工写 HTML 容易漏属性或格式错位。这时候就得考虑用模板引擎或构建时生成，而不是硬编码。
