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

Question

我发现这个很棒的手风琴代码非常紧凑，但我在这里想念的是 function 在打开另一个部分时自动关闭前一部分。 这可能很容易，但遗憾的是，我是一个完整的 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的 class 之前 - 循环遍历元素的 rest 并将其从所有元素中删除:)

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));