原生 元素可零基础5分钟实现语义正确、无障碍友好的faq折叠效果，无需js或框架； 必为直接子元素首项，safari对此最严格；css可用 summary::marker 和 details[open] 精准控制样式。
用 <details></details> 和 <summary></summary> 最快实现可收缩 FAQ
零基础也能 5 分钟做出带折叠/展开效果的常见问题列表，不用写 JavaScript，不依赖 CSS 框架。现代浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）原生支持 <details></details> 元素，它天生就是为 FAQ 这类交互设计的。
关键点：它默认收起，点击 <summary></summary> 才展开内容，且语义正确、屏幕阅读器友好、SEO 友好——比手写 display: none + JS 切换更可靠。
-
<details></details>是容器，每个问题一个 -
<summary></summary>必须是它的第一个子元素，显示标题（如“密码忘了怎么办？”） - 其余内容（答案）直接跟在
<summary></summary>后面，无需额外标签 - 加
open属性可让某条默认展开（比如第一条）
<details open><summary>密码忘了怎么办？</summary> 请访问登录页点击“忘记密码”，按邮件重置。 </details><details><summary>订单能修改地址吗？</summary> 下单后 15 分钟内可联系客服修改，之后无法变更。 </details>
Chrome/Firefox 正常但 Safari 显示异常？检查 <summary></summary> 位置和嵌套
Safari 对 <details></details> 的解析最严格：如果 <summary></summary> 不是 <details></details> 的**直接子元素第一项**，或里面嵌套了 <div>、<code><p></p> 等块级元素，Safari 会忽略折叠逻辑，变成普通段落。
- ✅ 正确：
<details><summary>标题</summary><p>答案</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details> - ❌ 错误：
<details><div><summary>标题</summary></div> <p>答案</p></details>（<summary></summary>被包在<div> 里） <li>❌ 错误：<code><details><p><summary>标题</summary></p> <p>答案</p></details>（<summary></summary>不是第一子元素） -
summary::marker：控制小三角图标（可隐藏或替换） -
details[open] summary：只在展开时生效的样式（比如加下划线、变色）
遇到 Safari 不折叠，先用浏览器开发者工具检查 DOM 结构是否符合规范，而不是急着加 CSS 或 JS。
想统一控制样式？用 CSS 选择器定位 <summary></summary> 和展开态
原生 <details></details> 默认样式简陋，但可通过 CSS 微调。重点用两个伪类：
示例（去除默认箭头，加粗标题，展开时背景浅灰）：
summary {
list-style: none;
}
summary::marker {
content: "▶ ";
}
details[open] summary {
font-weight: bold;
background-color: #f8f9fa;
}
注意：details[open] 是唯一可靠的展开状态判断方式，不要用 :hover 或 JS 模拟，否则破坏可访问性。
需要动画过渡效果？CSS max-height + overflow 是唯一兼容方案
<details></details> 原生不支持展开/收起动画。若必须加淡入滑动效果，只能放弃原生行为，改用 max-height + transition 模拟，但代价明显：
- 需手动绑定 click 事件切换 class
- 必须预估
max-height最大值（如max-height: 300px），内容超长会截断 - 屏幕阅读器可能无法感知状态变化，需补
aria-expanded
对零基础用户，强烈建议先用原生 <details></details>，等熟悉后再考虑动画。多数真实场景中，简洁可靠的交互比视觉动效更重要。
真正容易被忽略的是语义完整性：每条 <details></details> 都该有明确的问题主语（如“你们支持货到付款吗？”，而非“支持方式”），否则对键盘用户和读屏软件不友好。
