如何阻止点击内容区域时accordion（手风琴）组件自动关闭

问题原因 #

你当前将点击事件绑定在了整个.media-box-actuaries_accordion父容器上，容器内所有区域（包括展开后的内容区域）的点击都会触发类名切换逻辑，因此点击内容时会触发手风琴收起。

修复方案 #

仅需要调整JS代码即可实现需求，无需修改原有HTML和CSS，两种实现方式可选：

方案1：将点击事件绑定到头部（更推荐） #

仅监听头部的点击事件，点击时切换父容器的激活状态，更符合常规交互逻辑：

const accordionHeaders = document.querySelectorAll('.media-box-header-accordion');

for (let i = 0; i < accordionHeaders.length; i++ ){
  accordionHeaders[i].addEventListener('click', function(){
    this.closest('.media-box-actuaries_accordion').classList.toggle('active');
  })
}

方案2：原有绑定逻辑下增加点击区域判断 #

如果不想调整事件绑定的目标元素，也可以在原有逻辑中增加判断，点击内容区域时直接跳过切换逻辑：

const accordion = document.getElementsByClassName ('media-box-actuaries_accordion');

for (let i = 0; i < accordion.length; i++ ){
  accordion[i].addEventListener('click', function(e){
    // 点击内容区域时不执行切换
    if(e.target.closest('.media-box-actuaries_accordion_content')) return
    this.classList.toggle('active');
  })
}

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