details + summary 是帮助中心首选，因其天然匹配“标题+答案”语义结构，浏览器自动管理展开状态，无需手动维护open属性，且兼容性好、无障碍友好。
标签是最快、最可靠的方案，90% 的帮助中心 FAQ 场景直接用它就能跑通，无需 JS、键盘可访问、屏幕阅读器友好。
为什么
多级 FAQ 或嵌套菜单能不能用
为什么 details + summary 是帮助中心首选
帮助中心本质是“标题+答案”的静态结构，details 天然匹配这个语义：用户点击 summary 触发展开，浏览器自动管理状态，连 open 属性都不用手动维护。
- 常见错误现象：
<details><p>问题</p> <p>答案</p></details>—— 没<summary></summary>，点击完全没反应 -
<summary></summary>必须是<details></details>的第一个子元素，否则 Safari/Firefox 可能不识别 - 默认收起，加
open属性可默认展开：<details open><summary>常见问题</summary><p>这里是答案</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></details> - Safari 对
summary::marker支持不稳定，别只靠它改箭头；推荐用summary::before+transform: rotate(90deg)控制图标旋转
怎么让折叠有滑动动画（不是简单显隐）
原生 details 不支持高度过渡动画，要“滑出”效果，必须放弃它的内置逻辑，改用 max-height + JS 动态测量。
- CSS 过渡不支持
height: auto，所以不能写transition: height 0.3s - 安全做法：JS 点击时读取目标内容的
scrollHeight，设为max-height；收起时设max-height: 0并配overflow: hidden - 收起后建议清空
max-height行内样式（设为''），避免后续高度判断错乱 - 如果内容高度差异大（比如从 20px 到 500px），固定写死
max-height: 500px会导致小内容“弹跳”，务必动态读取
多级 FAQ 或嵌套菜单能不能用 details
可以嵌套，但部分浏览器（尤其是 Safari）对嵌套 <details></details> 支持差，点击子项可能意外触发父级收起。
- 不推荐直接嵌套多个
<details></details>实现二级菜单 - 更稳妥的做法：外层用
<details></details>，内部子项改用<button></button>+data-target+ JS 控制，用classList.toggle()切换active类 - 监听 click 时记得加
event.stopPropagation()，避免点击子链接意外触发父级折叠 - 如果侧边栏有多个可折叠项，别给所有
<button></button>绑同一个函数再手动查event.target，改用事件委托更轻量
纯 CSS 方案（禁用 JS 时怎么兜底）
当环境禁止 JS（如某些 CMS 导出页、微信公众号 HTML），可用 input[type="checkbox"] + :checked 伪类模拟。
- 结构顺序不能错：
<input type="checkbox" id="q1">→<label for="q1">问题</label>→<div class="answer">答案</div> - CSS 靠
input:checked + label + .answer选择器控制显隐 - 动画只能靠
max-height过渡，值需预估上限（比如最多 6 行 × 行高 ≈ 180px），设max-height: 180px - 无法响应内容高度变化（比如 JS 后续插入新段落），适合纯静态 FAQ
scrollHeight，而不是靠猜一个固定值。很多项目卡在这里，最后退回到无动画的原生方案。
