HTML折叠展开兼容性与使用方法

为什么给 details 加 onclick 是错的

手动绑定 onclick 并操作 display 或 hidden 属性，会直接破坏以下三点：

• 屏幕阅读器无法感知状态变化，aria-expanded 不会自动更新
• 键盘用户按空格/回车无法触发，丧失原生键盘支持
• 浏览器原生 toggle 事件监听失效，后续逻辑无法响应真实展开动作

正确做法是只监听 toggle 事件：

details.addEventListener('toggle', (e) => { console.log(e.target.open); });

max-height 过渡动画卡顿或截断内容怎么办

常见错误是把 max-height 设为 0 → auto，CSS 不支持 auto 过渡，结果就是跳变。真正可控的做法是：

• 展开前先读 content.scrollHeight，设为 max-height 值（如 240px）
• 过渡结束后，再设 max-height: 0 并同步加 overflow: hidden
• 若内容高度动态变化（比如字体加载后重排），需在 transitionend 后重新测量，否则下次展开可能撑不开或截断
• 避免设过大值（如 9999px），会导致滚动条异常或影响 getBoundingClientRect() 计算

手风琴效果（互斥展开）为什么 details 默认做不到