<details>和<summary>是原生、无障碍、无JS依赖的折叠方案，需确保<summary>为首个子元素，用CSS重置marker并添加图标，配合open属性与scrollIntoView()实现展开定位，SEO需JSON-LD结构化数据且文本严格一致。
用 <details> 和 <summary> 就够了，别写 JS
原生方案能直接跑通，不依赖脚本、不卡渲染、键盘和屏幕阅读器都认。只要浏览器不是 IE（Edge 79+ 起全支持），<details> 就是首选。
常见错误包括：<summary> 没放在 <details> 的第一个子位置；或者把它包在 <p> 或 <div> 里——这样折叠逻辑就失效了。
-
<summary>必须是<details>的**首个子元素**，不能有前置文本或空格 - 默认收起，加
open属性可默认展开：<details open> - 内容区域可以放任意 HTML，比如
<p>、<ul>、甚至嵌套另一个<details>（但注意：规范不支持<details>嵌套，部分浏览器会降级处理）
怎么去掉浏览器默认三角箭头并换图标
不同浏览器对 <summary> 的默认 marker 渲染不一致，Chrome 显示小三角，Safari 是右箭头，Firefox 则更细长。统一控制得靠 CSS。
关键点是：Webkit 内核需用 summary::-webkit-details-marker 隐藏原生图标；其他浏览器用 ::before 或 ::after 插入自定义符号。
立即学习“前端免费学习笔记（深入）”；
- 先清空默认：
summary::-webkit-details-marker { display: none; } - 再加图标：
summary::before { content: "▸"; margin-right: 6px; } - 展开时旋转：
details[open] summary::before { transform: rotate(90deg); }（需加display: inline-block和transition） - 别忘了移除
<summary>的list-style和默认 outline，否则焦点样式可能错位
滚动到某个 FAQ 项并自动展开怎么做
单纯用 scrollIntoView() 不行——如果目标 <details> 当前是收起状态，浏览器不会把隐藏内容区域滚进视口。
必须分两步：先设 element.open = true，再调用 scrollIntoView()，且要配好滚动参数，否则顶部会被 header 遮住。
- JS 示例：
const faqItem = document.querySelector('#faq-3');<br>faqItem.open = true;<br>faqItem.scrollIntoView({<br> block: 'nearest',<br> inline: 'start',<br> behavior: 'smooth'<br>}); - 记得提前设
scroll-margin-top补偿固定 header 高度，比如：details { scroll-margin-top: 80px; } - 如果页面加载后要自动展开并定位，确保 DOM 已就绪（比如放在
DOMContentLoaded里）
为什么 Google 不识别你的 FAQ 折叠页
用了 <details> ≠ 能出搜索富文本卡片。Google 只认结构化数据，不是语义标签。
哪怕你把每个问答都用 <details> 包得再标准，没注入 JSON-LD，就不会显示为折叠 FAQ 卡片。
- JSON-LD 必须放在
<head>或<body>顶部的<script type="application/ld+json">中 -
mainEntity数组里每项的name和acceptedAnswer.text必须和页面上可见文字**逐字一致**——标点、空格、换行差一点都会失败 - 字段不能少：
@context、@type: "FAQPage"、mainEntity数组，每项含@type: "Question" - 别指望靠 CSS 隐藏内容来“节省体积”——SEO 要求所有 FAQ 文本必须真实渲染在 DOM 中，不可用
display: none或visibility: hidden
name 和 acceptedAnswer.text，否则富文本就掉线。 
