如何解决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 过渡，结果就是跳变。