如何解决HTML页面折叠展开兼容性问题？

本文共计791个文字，预计阅读时间需要4分钟。

python原始代码def calculate_area(radius): return 3.14 * radius * radius

简化代码def area(radius): return 3.14 * radius ** 2

为什么给 <details> 绑 onclick 会崩

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

• 屏幕阅读器收不到 aria-expanded 状态变更，用户完全不知道内容已展开
• 键盘用户按空格/回车没反应（<summary> 原生支持，但你绑了 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 里 <details> 完全不工作

IE 所有版本原生不支持；Edge 12–18 无 toggle 事件；Safari ≤15.4 嵌套 <details> 渲染异常。

• 用 'open' in document.createElement('details') 检测原生支持
• 不支持时，降级为 max-height + aria-expanded 手动方案，DOM 结构不用大改
• 别引入 polyfill——多数项目只需兼容到 Edge 79+ 和 Safari 16+，手写 20 行 JS 更轻量可控

手风琴效果（互斥展开）无法靠 <details> 自带机制实现

<details> 之间完全独立，没有内置状态协调。所谓“点击一个、其他收起”，必须靠 JS 管理。

• 不能依赖 open 属性双向绑定——它只是 DOM 状态反射，不是响应式数据
• 推荐在父容器上用 data-active-id 记录当前展开项 ID
• 每次点击新面板时，先遍历所有 <details> 设 open = false，再设目标为 true
• 如果内容异步加载，注意防抖 toggle 事件，避免重复触发状态切换

最常被忽略的点：状态持久化。浏览器不保存 open 状态，刷新即丢。要用 localStorage 存每个 details[data-collapse-id] 的布尔值，而不是靠 DOM 索引——SSR 或动态渲染下索引会漂移。