让vanilla JS手风琴自动关闭上一节。

Question

我发现了这个伟大的手风琴，代码非常紧凑，但我在这里错过了一个功能，当打开另一个时，自动关闭前一个部分。这可能很简单，但很遗憾，我是个十足的JS菜鸟。原代码来源。

const items = document.querySelectorAll(".accordion a");

function toggleAccordion(){
  this.classList.toggle('active');
  this.nextElementSibling.classList.toggle('active');
}

items.forEach(item => item.addEventListener('click', toggleAccordion));

Answer 1

到目前为止，你尝试了什么？ 如果你没有，尝试以下逻辑。

在你给一个元素一个 active类 - 循环处理其余的元素，并将其从所有元素中移除 :)

const items = document.querySelectorAll(".accordion a");
const remove = () => {
  items.forEach(el => {
    el.classList.remove('active');
     el.nextElementSibling.classList.remove('active');
  })
}
function toggleAccordion(){
  remove()
  this.classList.toggle('active');
  this.nextElementSibling.classList.toggle('active');
}

items.forEach(item => item.addEventListener('click', toggleAccordion));

Answer 2

你可以存储活动的那个...

    const items = document.querySelectorAll(".accordion a");
    let active = null;
    function toggleAccordion(){
      if(active){
        active.classList.toggle('active');
      } 
      this.classList.toggle('active');
      this.nextElementSibling.classList.toggle('active');
      active = this;
    }
    items.forEach(item => item.addEventListener('click', toggleAccordion));