无法直接用于广告折叠，因其缺乏平滑过渡、埋点触发、媒体暂停、箭头定制等能力，且旧版Safari中toggle事件延迟导致曝光计时不准；需用max-height+JS手动实现，并注意状态同步与资源清理。
<details></details> 是唯一能不用 JS 就实现语义正确、键盘可访问的折叠广告方案，但它的默认样式和行为不适合商业广告场景；真要控制展开逻辑、加动画、埋点或兼容旧浏览器，必须用 max-height + JavaScript 手动实现。
为什么不能直接用 <details></details> 做广告折叠
广告折叠不是普通 FAQ，它需要：自动默认收起（<details></details> 默认就是收起，这点 OK）、点击后平滑展开（<details></details> 无 CSS 过渡能力）、展开时触发统计埋点（原生不支持事件监听）、关闭后清空 iframe 或暂停视频（<summary></summary> 点击无法拦截或干预）。
-
<details></details>的toggle事件在 Safari 旧版本中存在延迟，广告曝光计时不准 - 无法用 CSS 控制箭头图标位置或替换成「▶」/「×」等广告常用符号
- 广告内容含
<iframe></iframe>或<video></video>时，<details></details>收起后不会自动暂停或销毁，仍消耗资源 - SEO 友好性看似加分，但搜索引擎对广告类
<details></details>内容实际抓取权重极低
max-height 过渡方案怎么写才不翻车
核心是避免用 height: auto 做过渡终点——CSS 不支持。必须用固定数值或动态读取 scrollHeight。
- 硬编码
max-height（如500px）适合高度可控的广告文案，但图片加载后可能撑破，导致突然截断 - 动态方案更稳妥：点击时先设
max-height: 0，强制重排（例如读一次offsetHeight），再设max-height: element.scrollHeight + "px" - 过渡结束后，建议把
max-height设回none，否则后续 JS 调用scrollHeight可能误判（因父容器被限制高度） - 别忘了加
overflow: hidden，否则内容会溢出可见区域
广告折叠里最容易漏掉的三个细节
这些点不处理，上线后容易被产品或运营当场叫停。
立即学习“前端免费学习笔记（深入）”；
- 广告收起时，必须手动调用
iframe.contentWindow.postMessage()或video.pause()，否则音频继续播放 - 移动端点击区域要 ≥44×44px，
<button></button>外层最好包一层<div> 并设 <code>padding，避免 iOS Safari 点击失灵 - 如果广告需支持「首次进入自动展开」，不能只靠 JS onload，得结合
IntersectionObserver判断是否真正进入视口，否则首屏未加载完就触发，用户根本看不到
广告折叠真正的难点不在展开动画，而在状态同步：JS 控制显隐、媒体资源生命周期、埋点时机、服务端曝光计费逻辑，这四者必须严格对齐。一个没对齐，数据就对不上。
