Как отфильтровать закрытие элементов в JS?

Question

[Alexander]

Здравствуйте, как сделать чтобы при клике на следующее меню, предыдущее закрывалось а новое открывалось, буду благодарен за помощь

Comments

[Ярослав Иванов]

Алгоритм какой? Опишите его.

Как только опишите алгоритм сами решите задачу.

[Alexander]

Ярослав Иванов, кликните по Home 1, потом сразу по Home 2. Нужно чтобы Home 1 спрятался

[Ярослав Иванов]

Alexander, Неверный алогритм. Алгоритм не должен привязываться к конкретным элементам.

[Alexander]

А как посоветуете решить эту задачу? Сделать с помощью классов и конструктора?

[Ярослав Иванов]

Alexander, Причем тут класс и конструктор? Вопрос про алгоритм.

[Alexander]

Ярослав Иванов, ну тогда какой вы предложите алгоритм без привязке к элементам ? Как вы создаете подобные dropdown menu?

[Ярослав Иванов]

Alexander, Я вас прошу на словах описать алгоритм. Он очень прост.

[Alexander]

Ярослав Иванов, уже всё решили

[Ярослав Иванов]

Alexander, самое то главное вы научились чему-то?

[Alexander]

Ярослав Иванов, да

if (element === menu) {
          return
        } else {
          element.classList.remove("active")
        }

Answer 1

[Alex]

Где-то примерно как-то так

$dropDowns.forEach((el) => {
  el.addEventListener("click", () => {
    const menu = el.querySelector('.dropdown_menu')
    if (menu.classList.contains('active')) {
      menu.classList.remove("active")
    } else {
      menu.classList.add("active")
      $dropMenus.forEach((element) => {
        if (element === menu) {
          return
        } else {
          element.classList.remove("active")
        } 
      });
    }
  });
});

Comments

[Alexander]

Работает, спасибо большое)

Answer 2

[Tim]

Answer 3

[Eduard Dankov]

$dropDowns.forEach((el) => {
  el.addEventListener("click", (e) => {
    $dropDowns.forEach( element => element.classList.remove("active") );
    e.target.classList.toggle("active");
  });
});

Comments

[Alexander]

я уже пробовал этот способ, он не работает к сожалению. При повторном клике меню не скрывается, и вот небольшая поправочка

$dropDowns.forEach((el) => {
  el.addEventListener("click", (e) => {
    $dropMenus.forEach( element => element.classList.remove("active") );
    el.querySelector('.dropdown_menu').classList.toggle('active');
  });
});