HTML怎么利用toggle事件制作手风琴菜单-html教程-PHP中文网

toggle 不是原生 DOM 事件，浏览器不触发，addEventListener('toggle', ...) 静默失败；唯一能天然触发 toggle 事件的是 + 组合，语义正确、无障碍友好、无需 JS 即可工作。

html怎么利用toggle事件制作手风琴菜单

HTML 中没有 toggle 事件，别被名字骗了

直接说结论：toggle 不是原生 DOM 事件，浏览器不触发它，addEventListener('toggle', ...) 会静默失败。手风琴菜单的“展开/收起”切换逻辑，得靠自己监听点击、用 JS 控制元素的 open 属性或 CSS 类，再配合

的原生行为（它才真正触发 toggle 事件）。

用
+
实现最简手风琴（推荐首选）

这是唯一能天然触发 toggle 事件的组合，语义正确、无障碍友好、无需 JS 就能工作。JS 只用来增强（比如动画、联动关闭其他项）。

元素自带 open 属性和 toggle 事件，点击自动触发
监听 toggle 事件时，event.target 是元素，可读取 event.target.open 判断当前状态
若需“单开模式”（打开一个时关闭其他），不能依赖默认行为，得手动控制其他的 open 属性

<details><summary>标题 1</summary><p>内容区...</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="overflowclass">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
													<p class="overflowclass">使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
												</div>
												<a rel="nofollow" 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>
</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

兼容老浏览器或需要自定义结构（比如用

 套  和 ）时，就放弃 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 属性、键盘交互、动画节奏这五者必须严格同步。漏掉任意一环，用户要么看不见变化，要么操作失灵，要么读屏器报错。