HTML折叠展开兼容性问题解决方法

为什么给

绑 onclick 会崩

这不是写法“不够酷”，而是直接破坏浏览器原生行为：

• 屏幕阅读器收不到 aria-expanded 状态变更，用户完全不知道内容已展开
• 键盘用户按空格/回车没反应（
  原生支持，但你绑了 onclick 就覆盖掉了）
• toggle 事件监听失效，后续 JS 逻辑（比如统计、联动）全部断掉

正确做法只有一条：details.addEventListener('toggle', handler)。它在 Chrome/Firefox/Safari/Edge 新版中稳定触发，且涵盖鼠标和键盘操作。

max-height 过渡动画卡住或截断内容

想加滑动效果？别设 max-height: 0 → auto，CSS 不支持 auto 过渡，结果就是跳变。

• 展开前先读 content.scrollHeight，设为具体像素值（如 240px）
• 过渡结束后再设 max-height: 0 并同步加 overflow: hidden
• 避免填个夸张值（如 9999px），否则影响 getBoundingClientRect() 和滚动条渲染
• 内容含未加载图片时，scrollHeight 可能不准，需在 img.onload 后重新测量

IE 或旧 Safari 里

完全不工作

IE 所有版本原生不支持；Edge 12–18 无 toggle 事件；Safari ≤15.4 嵌套