html原生可实现无js的faq折叠，需确保为首个子元素、避免交互控件嵌套、用aria-expanded+hidden保障可访问性，兼容性不足时需js回退。
用 <details></details> 和 <summary></summary> 快速实现可折叠 FAQ
现代 HTML 原生支持折叠/展开，不用 JS 就能做干净的 FAQ 列表。<details></details> 是容器，<summary></summary> 是点击区域，浏览器自动处理展开状态和箭头图标。注意：<summary></summary> 必须是 <details></details> 的第一个子元素，否则点击无效。
常见错误：把多个 <p></p> 直接塞进 <details></details> 却忘了包一层 <summary></summary>，结果整个区块不可交互；或者给 <summary></summary> 加了 display: block 导致默认箭头消失（需用 list-style 或伪元素手动恢复）。
- 每个问题独立用一对
<details></details>包裹，避免嵌套 -
<summary></summary>里可以放文字、图标甚至短链接，但别放交互控件（如按钮），会干扰折叠逻辑 - 加
open属性让某条默认展开：<details open><summary>为什么…</summary><p>因为…</p></details>
兼容性差时用 aria-expanded + 简单 JS 回退
IE 完全不支持 <details></details>，Safari 旧版本对样式控制有限。如果必须兼容 IE 或需要统一视觉（比如箭头方向、动画），就得手动控制状态。核心是监听 <summary></summary> 点击，切换 aria-expanded 值，并用 JS 显隐内容区。
关键点：不能只靠 display: none/block 切换，否则屏幕阅读器无法感知变化；必须同步更新 aria-expanded 和 hidden 属性。示例逻辑：
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"></summary>和对应内容区加hidden属性 - 别用
visibility: hidden替代hidden属性——前者仍占布局且屏幕阅读器可能读出 - 动画要用
max-height过渡，直接过渡height无效（因为高度是 auto）
样式定制：覆盖默认箭头与间距
Chrome/Firefox 默认在 <summary></summary> 左侧显示小三角，但位置、颜色、大小没法用常规 CSS 调整。要自定义，得先用 list-style: none 干掉原生箭头，再用 ::before 或 SVG 图标替换。
容易踩的坑：给 <summary></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></details> 内所有文本，无论是否默认展开。但若整页 FAQ 全部默认收起（没加 open），可能影响首屏关键信息曝光——建议至少第一条设 open，既利于 SEO，也降低用户首次点击成本。
别为了“美观”把 FAQ 改成纯 JS 渲染（比如从 JSON 动态生成），这会让爬虫看不到内容，也增加首屏白屏风险。结构优先用语义化 HTML，样式和交互后置增强。
- 每个
<details></details>应该有明确的问题文本，避免用“点击查看”这种无意义摘要 - 答案部分用
<p></p>、<ul></ul>等语义标签组织，别全堆<div> <li>如果答案含代码块，用 <code><pre class="brush:php;toolbar:false;"><code></code>，别用 <code><textarea></textarea></code> 或图片截图</pre>
真正麻烦的是内容维护——当 FAQ 条目超过 20 条，手工写 HTML 容易漏属性或格式错位。这时候就得考虑用模板引擎或构建时生成，而不是硬编码。
