HTML卡片展开功能应监听summary的click事件并用setTimeout读取details.open属性，因toggle事件在Firefox中完全不支持、Chrome/Edge仅120+支持、Safari仅17.4+支持，且不冒泡、不响应JS修改open属性。
HTML卡片展开功能怎么捕获toggle事件
原生 <details></details> 元素不触发标准的 toggle 事件——它只在 Chrome/Edge 120+ 和 Safari 17.4+ 中支持 toggle 事件，且 Firefox 目前完全不支持。想稳定监听展开/收起状态，不能只靠监听这个事件。
为什么toggle事件不可靠
浏览器兼容性是最大问题：toggle 是一个相对较新的 DOM 事件，规范虽已定稿，但实现进度不一。即使在支持它的浏览器中，也存在两个关键限制：
-
toggle事件不会冒泡，无法委托到父容器 - 它只在用户交互（点击
<summary></summary>）时触发，JS 主动调用element.open = true不会触发该事件 - Firefox 当前（2026年10月）仍返回
undefined给details.addEventListener('toggle', ...)
更稳妥的监听方式：监听click + 检查open属性
直接监听 <summary></summary> 的 click，再读取父级 <details></details> 的 open 属性，是最小依赖、全浏览器兼容的做法：
<details id="faq-1">
<summary>Q: 什么是零依赖项目？</summary>
<p>A: 纯 HTML/CSS/JS，双击 index.html 就能跑。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</details>
对应 JS：
const details = document.getElementById('faq-1');
const summary = details.querySelector('summary');
summary.addEventListener('click', () => {
// 等待下一轮渲染，确保 open 已更新
setTimeout(() => {
console.log('当前状态：', details.open);
if (details.open) {
// 展开后逻辑，比如加载内容、触发动画
} else {
// 收起后逻辑，比如清理定时器、重置表单
}
}, 0);
});
- 不用等
toggle事件，规避兼容性风险 -
setTimeout(..., 0)是为了确保读取的是 DOM 更新后的最新open值（因为 click 后浏览器才同步更新该属性） - 如果卡片有多个，可用事件委托监听所有
summary，再用event.target.closest('details')定位父级
需要动画或异步加载时，用transitionend或ResizeObserver
仅靠 open 属性变化无法知道 CSS 过渡是否完成，或者内容高度是否真正渲染完毕。这时要分层处理：
- 若卡片内部有
max-height过渡动画，监听transitionend更准确 - 若展开后需动态插入内容（如 fetch 数据），应在
details.open === true后立即发起请求，而不是等动画结束 - 若要精确测量展开后高度（比如做平滑滚动定位），用
ResizeObserver监听<details></details>内容区高度变化，比轮询或定时器可靠得多
容易被忽略的一点：很多开发者把逻辑全塞进 toggle 事件回调里，结果在 Firefox 或旧版 Chrome 中静默失效——实际只需换一行监听目标，就能覆盖全部场景。
