无法直接用于广告折叠，因其缺乏平滑过渡、埋点触发、媒体暂停、箭头定制等能力，且旧版Safari中toggle事件延迟导致曝光计时不准；需用max-height+JS手动实现，并注意状态同步与资源清理。

是唯一能不用 JS 就实现语义正确、键盘可访问的折叠广告方案，但它的默认样式和行为不适合商业广告场景；真要控制展开逻辑、加动画、埋点或兼容旧浏览器，必须用 max-height + JavaScript 手动实现。

为什么不能直接用

做广告折叠

广告折叠不是普通 FAQ，它需要：自动默认收起（

默认就是收起，这点 OK）、点击后平滑展开（

无 CSS 过渡能力）、展开时触发统计埋点（原生不支持事件监听）、关闭后清空 iframe 或暂停视频（

点击无法拦截或干预）。

• 的 toggle 事件在 Safari 旧版本中存在延迟，广告曝光计时不准
• 无法用 CSS 控制箭头图标位置或替换成「▶」/「×」等广告常用符号
• 广告内容含 或 时，
  收起后不会自动暂停或销毁，仍消耗资源
• SEO 友好性看似加分，但搜索引擎对广告类
  内容实际抓取权重极低

max-height 过渡方案怎么写才不翻车

核心是避免用 height: auto 做过渡终点——CSS 不支持。必须用固定数值或动态读取 scrollHeight。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 硬编码 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， 外层最好包一层
  并设 padding，避免 iOS Safari 点击失灵
• 如果广告需支持「首次进入自动展开」，不能只靠 JS onload，得结合 IntersectionObserver 判断是否真正进入视口，否则首屏未加载完就触发，用户根本看不到

广告折叠真正的难点不在展开动画，而在状态同步：JS 控制显隐、媒体资源生命周期、埋点时机、服务端曝光计费逻辑，这四者必须严格对齐。一个没对齐，数据就对不上。