Блог

Я изучаю ванильный JS и DOM. Сегодня у меня возникла проблема, когда я хочу удалить класс всех элементов, ожидающих один.

 const panels = document.querySelectorAll(".panel");
  function toggleOpen() {
    this.classList.toggle("open");
    console.log(panels);
  }
  function toggleActive(e) {
    if (e.propertyName.includes("flex")) {
      this.classList.toggle("open-active");
    }
  }

  panels.forEach((panel) => panel.addEventListener("click", toggleOpen));
  panels.forEach((panel) =>
    panel.addEventListener("transitionend", toggleActive)
  );
  

Я хочу, чтобы при нажатии кнопки «панель» единственная панель, на которую можно щелкнуть, имела класс «открыть» и удаляла весь класс «открыть» из всех других «панелей». (Точно, я хочу, чтобы только на панели всегда был класс «open», и он может переключаться.) Спасибо за вашу помощь.

В toggleOpen , выполните итерацию по всем панелям (кроме этой) и сначала удалите их open класс:

 function toggleOpen() {
  // Close all other panels:
  for (const panel of panels) {
    if (panel !== this) {
      panel.classList.remove('open');
    }
  }
  // Either open this panel or close it:
  this.classList.toggle("open");
}