Dropdown menu JavaScript

Question

Witam, mam pytanie do bardzej doświadczonych kolegów, czy można moj kod napisać lepiej albo go ulepszyć ?

const dropdowns = document.querySelectorAll('.navbar-item.has-dropdown');

const removeActive = (ignored) => {
      dropdowns.forEach(drop => {
            if (drop !== ignored) {
                  drop.classList.remove('is-active');
            }
      });
};

dropdowns.forEach(dropdown => {
      dropdown.addEventListener('click', () => {
            removeActive(dropdown);
            dropdown.classList.toggle('is-active');
      });
});

 

Answer 1

Jeśli chodzi o sam kod, to można przypiąć jeden event listener, na cały kontener z menu, nie zaś na poszczególne rozwijalne elementy. Można to zrobić dzięki technice event delegation.

Natomiast warto też zadbać o to, żeby takie menu było dostępne. W tym zakresie brakuje przede wszystkim dwóch rzeczy: odpowiedniego markupu z ARIA i obsługi klawiaturą. Możesz spojrzeć na przykłady na blogu Adriana Roselliego albo w ARIA Practices. To pierwsze to bardziej takie dropdown menu do nawigacji po stronie, drugie – do jakichś akcji. Nie podałeś za bardzo kontekstu takiego menu, więc trudno stwierdzić, które bardziej pasuje.

Comments

Dziekuję, jeszcze nie do końca rozumiem event delegation

---

Bez event delegation i bez forEach w removeActive.
Znajdź tylko ten element, który ewentualnie już posiada klasę is-active.

const dropdowns = document.querySelectorAll('.navbar-item.has-dropdown');

const removeActive = (skip) => {
  const active = document.querySelector('.navbar-item.is-active');
  if (active && active !== skip) {
    active.classList.remove('is-active');
  }
};

dropdowns.forEach(dropdown => {
  dropdown.addEventListener('click', () => {
    removeActive(dropdown);
    dropdown.classList.toggle('is-active');
  });
});