用 details 和 summary 最快实现可折叠隐私协议，无需 JS、不引库、兼容现代浏览器；summary 必须为 details 的首个子元素，加 open 属性可默认展开，原生支持无障碍与 SEO，内容内含链接、表单、代码块均正常工作。
用 details 和 summary 最快实现可折叠隐私协议
原生 HTML 就能做，不用 JS、不引库、兼容所有现代浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）。details 是语义化标签，屏幕阅读器能正确识别展开/收起状态，比手写 div + click 更可靠。
常见错误是把 summary 当成普通标题加样式后忽略默认箭头行为，或在内部嵌套交互元素（比如按钮）导致点击穿透——summary 点击会自动触发切换，其他事件需显式 event.stopPropagation()。
-
summary必须是details的第一个子元素，否则折叠逻辑失效 - 默认展开用
open属性：<details open></details> - 想隐藏原生下拉箭头？CSS 可控：
summary::marker { content: "▸ "; }或display: none后用伪元素重绘
折叠内容里有链接、表单或代码块怎么保功能
details 内部放任意合法 HTML 都行，包括 a、input、pre。但要注意两点：一是表单提交不会因折叠状态被拦截；二是如果用了 CSS 把 details[open] > *:not(summary) 设为 display: none，会导致内部焦点元素（如 input）无法获得焦点——应改用 visibility: hidden 或 max-height: 0 + overflow: hidden 做过渡动画。
示例中常见坑：<details><summary>隐私条款</summary><pre class="brush:php;toolbar:false;"><code>...</code></pre></details>，pre 会继承父级字体大小，建议重置：details pre { font-size: 0.875em; }。
立即学习“前端免费学习笔记（深入）”；
需要平滑展开动画？CSS 过渡得绕开 height: auto
CSS 无法直接对 height: auto 做过渡，硬设 transition: height 0.3s 会失效。可行解法只有两个：
- 用
max-height模拟：给details:not([open]) > *:not(summary)设max-height: 0; overflow: hidden;，再给details[open] > *:not(summary)设足够大的max-height（比如600px），配合transition: max-height 0.3s ease-in-out - 用
transform: scaleY()+origin：更轻量，但内容会缩放，需额外重置字体和行高
别用 JS 测高度再设 inline style——破坏可访问性，且 SSR 渲染时高度计算不准。
SEO 和法律合规要注意什么
搜索引擎能正常索引 details 内容，无论是否 open，这点比 JS 动态加载更稳妥。但法律上，GDPR 或《个人信息保护法》要求“充分告知”，不能把关键条款（如数据共享范围、用户权利）藏太深。实操建议：
- 首屏必须显示协议标题 + “点击查看完整条款”文字，不能只靠小箭头图标
- 默认展开前 2–3 行摘要，再接
details完整内容 - 用户首次勾选“同意”前，确保
details至少被手动展开过一次（可用details.addEventListener('toggle', ...)记录）
移动端点按区域小，summary 最好加 padding: 12px 以上，避免误触。
