点击关闭按钮时Accordion折叠面板无法关闭的JavaScript问题修复求助

嘿，我一眼就瞅出问题所在了——事件冒泡在搞鬼！你的关闭按钮嵌套在.a面板元素里面，当点击按钮时，事件会向上冒泡到父面板，触发父面板的点击事件，刚移除的active类又被重新加上，所以看起来按钮点击后没效果。

下面给你两种修复方案，选哪种都行：

方案1：阻止按钮的事件冒泡 #

在按钮的点击事件里添加event.stopPropagation()，阻止事件传递到父面板元素，从根源避免冲突：

document.addEventListener("DOMContentLoaded", (e) => { 
  const accordion = document.querySelectorAll('.a'); 
  const button = document.querySelectorAll('.b'); 

  accordion.forEach((accs, idx) => { 
    accs.addEventListener('click', () => { 
      addActive(accs, idx); 
    }); 
  }); 

  function addActive(el, index) { 
    el.classList.add('active'); 
    accordion.forEach((accs, idx) => { 
      if (idx !== index) { 
        accs.classList.remove("active"); 
      } 
    }); 
  } 

  button.forEach(xer => { 
    xer.addEventListener('click', (e) => { 
      e.stopPropagation(); // 关键：阻止事件冒泡到父面板
      // 优化：只关闭当前按钮对应的面板，而非所有面板
      removeActive(xer.closest('.a'));
    }); 
  }); 

  function removeActive(el) { 
    el.classList.remove('active'); 
  } 
})

方案2：在父面板的点击事件里判断点击目标 #

如果不想阻止冒泡，可以在父面板的点击事件里检查点击的是不是关闭按钮，若是就跳过激活逻辑：

document.addEventListener("DOMContentLoaded", (e) => { 
  const accordion = document.querySelectorAll('.a'); 
  const button = document.querySelectorAll('.b'); 

  accordion.forEach((accs, idx) => { 
    accs.addEventListener('click', (e) => { 
      // 点击的是关闭按钮的话，直接返回不执行激活操作
      if (e.target.classList.contains('b')) return;
      addActive(accs, idx); 
    }); 
  }); 

  function addActive(el, index) { 
    el.classList.add('active'); 
    accordion.forEach((accs, idx) => { 
      if (idx !== index) { 
        accs.classList.remove("active"); 
      } 
    }); 
  } 

  button.forEach(xer => { 
    xer.addEventListener('click', () => { 
      // 只关闭当前按钮对应的面板
      removeActive(xer.closest('.a'));
    }); 
  }); 

  function removeActive(el) { 
    el.classList.remove('active'); 
  } 
})

另外我还帮你优化了removeActive函数，现在它只会关闭点击按钮对应的那个面板，更贴合你参考设计的交互逻辑~

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