不能用click绑定商品参数栏展开逻辑，因其无法响应空格/回车键及屏幕阅读器操作，不更新aria-expanded状态，且手动设open会触发toggle循环、冒泡可能意外关闭面板。
原生 toggle 事件能可靠响应鼠标、键盘（空格/回车）和屏幕阅读器操作，比 click 更适合商品参数这类需无障碍支持的折叠栏。
为什么不能用 click 绑定参数栏展开逻辑
商品参数栏常被键盘用户或辅助技术访问，click 事件无法捕获空格键、回车键触发的展开行为，Safari 中还可能完全不触发。更严重的是：它绕过了浏览器对 details 的原生焦点管理和 ARIA 状态同步，导致 aria-expanded 不更新，屏幕阅读器读不出当前状态。
-
toggle是唯一由浏览器在所有合法交互后统一派发的事件，时机稳定、语义完整 - 监听
click后手动设details.open = true会再次触发toggle，造成逻辑循环 - 若参数栏含表单控件（如尺寸下拉框），
click冒泡还可能意外关闭面板
如何用 toggle 实现单开（手风琴）参数栏
电商页面通常要求“一次只展开一个参数组”，但多个 details 默认互不干扰——必须靠 JS 主动管理状态。
- 给所有参数栏加统一 class，例如
class="param-group" - 监听父容器（如
<section class="product-params"></section>）上的toggle事件，用事件委托避免动态插入后失效 - 在回调中只对
event.target.open === true的项执行展开，其余同组details调用.removeAttribute('open')（不是.open = false，后者会再触发一次toggle） - 确保每个
summary的id与对应内容区的aria-controls匹配，例如：<summary id="size-toggle">尺码</summary>→<div aria-labelledby="size-toggle">...</div>
toggle 事件里必须处理的三个细节
商品参数栏不是静态文本，内容常含图片、表格、甚至第三方 SKU 选择器，toggle 回调里不干预，就会出问题。
立即学习“前端免费学习笔记（深入）”；
- 收起时暂停视频或 iframe：检查
details.open === false后，遍历内部iframe执行iframe.contentWindow?.document?.write('')，或对video调用.pause() - 展开前预加载懒加载图片：若参数区含
loading="lazy"的img，可在toggle中触发img.decode()防止展开后闪烁 - 避免滚动跳动：若参数栏高度变化大，展开后立即
scrollIntoView({ block: 'nearest' })可能打断用户操作；建议加setTimeout(..., 0)延迟到下一帧执行
兼容性兜底和 Safari 特别注意
IE 完全不支持 details，旧版 Safari（≤15.3）对 summary::marker 渲染异常且 toggle 事件偶发丢失——不能只靠 CSS 降级。
- 检测支持：用
'open' in document.createElement('details')判断，不支持时动态替换为div+max-height方案 - Safari 15.4+ 才修复
summary的 focus 样式 bug，旧版需额外加tabindex="0"并监听keydown补充空格/回车逻辑 - 不要用
display: flex或display: grid改summary的显示方式，会破坏点击热区，改用inline-flex或包裹span
真正难的不是监听 toggle，而是判断哪些参数内容需要在收起时主动销毁、哪些动画要等 transitionend 后再清理、以及如何让屏幕阅读器在展开瞬间准确聚焦到内容首元素——这些都不报错，但一上生产环境，用户立刻感知到“不对劲”。
