toggle 不是原生 DOM 事件，浏览器不触发，addEventListener('toggle', ...) 静默失败；唯一能天然触发 toggle 事件的是 + 组合，语义正确、无障碍友好、无需 JS 即可工作。
HTML 中没有 toggle 事件，别被名字骗了
直接说结论：toggle 不是原生 DOM 事件，浏览器不触发它，addEventListener('toggle', ...) 会静默失败。手风琴菜单的“展开/收起”切换逻辑，得靠自己监听点击、用 JS 控制元素的 open 属性或 CSS 类，再配合 <details></details> 的原生行为（它才真正触发 toggle 事件）。
用 + 实现最简手风琴（推荐首选）
实现最简手风琴（推荐首选）
这是唯一能天然触发 toggle 事件的组合，语义正确、无障碍友好、无需 JS 就能工作。JS 只用来增强（比如动画、联动关闭其他项）。
-
<details></details>元素自带open属性和toggle事件，点击<summary></summary>自动触发 - 监听
toggle事件时，event.target是<details></details>元素，可读取event.target.open判断当前状态 - 若需“单开模式”（打开一个时关闭其他），不能依赖默认行为，得手动控制其他
<details></details>的open属性
<details>
<summary>标题 1</summary>
<p>内容区...</p><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><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>
</details>
<details>
<summary>标题 2</summary>
<p>内容区...</p><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>
<script>
document.querySelectorAll('details').forEach(details => {
details.addEventListener('toggle', () => {
if (details.open) {
// 当前被打开，关闭其他
document.querySelectorAll('details:not(:hover)').forEach(d => {
if (d !== details) d.open = false;
});
}
});
});
</script>
不用 时，用 click + class 切换模拟 toggle
兼容老浏览器或需要自定义结构（比如用 <div> 套 <code><h3></h3> 和 <div>）时，就放弃 <code>toggle 事件，改用 click 监听 + 手动切换类名或 aria-expanded 属性。
- 必须显式设置
aria-expanded和aria-controls，否则屏幕阅读器无法识别状态 - 用
classList.toggle()比classList.add()/remove()更安全，避免重复操作 - CSS 动画只对
max-height或transform等可动画属性生效；直接display: none/block无法过渡
<button aria-expanded="false" aria-controls="panel1">标题 1</button>
<div id="panel1" class="accordion-panel" hidden>内容...</div>
<script>
document.querySelector('button').addEventListener('click', function() {
const isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
document.getElementById(this.getAttribute('aria-controls')).hidden = isExpanded;
});
</script>
容易踩的坑：CSS 过渡失效、键盘不可用、状态不同步
手风琴看起来简单，但实际交付中高频出问题的地方很集中：
- 给
height: auto加transition—— 无效，浏览器无法计算 auto 的终点值；改用max-height或transform: scaleY() - 只响应鼠标点击，忽略
Enter和Space键（button元素默认支持，div不支持，得手动加keydown处理） - JS 修改了
open属性或类名，但忘了同步更新aria-expanded，导致辅助技术读错状态 - 多个手风琴共存时，用
querySelectorAll获取全部后遍历，但没排除自身，造成“刚点开又关掉”的抖动
复杂点在于：视觉状态、DOM 属性、ARIA 属性、键盘交互、动画节奏这五者必须严格同步。漏掉任意一环，用户要么看不见变化，要么操作失灵，要么读屏器报错。
