如何使用事件委托让手风琴/折叠面板在动态DOM环境下正常运行？

问题原因 #

你原有的实现是直接给首次渲染出来的.accordion元素逐个绑定点击事件，购物车抽屉重新渲染时，旧的DOM元素被销毁替换，之前绑定的事件也就跟着失效了。

优化实现（事件委托方案） #

核心思路是把点击事件绑定到购物车抽屉的不会随重绘销毁的静态父容器上，通过事件冒泡匹配触发源，适配动态更新的DOM：

JS代码 #

// 请将选择器替换为你购物车抽屉最近的静态外层容器，例如 .cart-drawer，性能优于document
const staticContainer = document;

staticContainer.addEventListener('click', (e) => {
  // 匹配点击源最近的手风琴按钮
  const targetAccordion = e.target.closest('.accordion');
  if (!targetAccordion) return;

  // 原有手风琴交互逻辑
  targetAccordion.classList.toggle('active');
  const panel = targetAccordion.nextElementSibling;
  panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
});

HTML结构无需修改 #

<button type="button" class="accordion">展开</button>
<div class="panel">
  <p>内容文本...</p>
</div>

额外优化建议 #

• 优先使用最近的静态父容器作为事件绑定对象，可减少不必要的事件触发判断，避免全局事件冲突
• closest方法可兼容手风琴按钮内部有嵌套子元素（如图标、文字标签）的场景，点击子元素也能正常触发交互

内容的提问来源于stack exchange，提问作者Maurice