Chowające się menu po kliknięciu w odnośnik - HTML/JS

Question

Witam,

Próbuję zrobić, aby responsywne menu się zamykało po kliknięciu w odnośnik "a". Klikając w pierwszy link, menu się zamyka, ale jak klikam w kolejne to pozostaje widoczne. Próbowałem też const nava = document.querySelectorAll('.nav_links a'); Ale wtedy menu nie zamykało się nawet po kliknięciu w pierwszy link.

const navSlide = () => {
    const burger = document.querySelector('.nav_links_menu');
    const nav = document.querySelector('.nav_links');
    const nava = document.querySelector('.nav_links a');

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav_active');
        //Burger Animation
        burger.classList.toggle('toggle');
    })

    nava.addEventListener('click', () => {
        nav.classList.toggle('nav_active');
        burger.classList.toggle('toggle');
    })
}

 

Answer 1

document.querySelectorAll zwraca listę elementów html (NodeList), więc jak chcesz dodać do nich EventListener-a po prostu wykonaj iterację.

 

const nava = document.querySelectorAll('.nav_links a');
nava.forEach((item) => {
  item.addEventListener('click', () => {
    nav.classList.toggle('nav_active');
    burger.classList.toggle('toggle');
  });
});

 

Comments

Dzięki, teraz bardziej rozumiem działanie querySelectorAll.

---

Dodając parametr e (event) możesz "zobaczyć", który element z listy został "kliknięty"

 

const nava = document.querySelectorAll('.nav_links a');
nava.forEach((item) => {
  item.addEventListener('click', (e) => {
    // e.target.id, e.target.classList itd.
    console.log(e.target);
  });
});

const nava = document.querySelectorAll('.nav_links a');
nava.forEach((item) => {
  item.addEventListener('click', ({target}) => {
    // target.id, target.classList itd.
    console.log(target);
  });
});

 

What exactly is the parameter e (event) and why pass it to JavaScript functions?

Answer 2

Metoda querySelector zwraca jeden element, więc jeśli podepniesz się pod niego na event, to nie złapie on eventów z innych elementów (chyba, że przez delegację, co nie dotyczy elementów w relacji rodzeństwa). Korzystając z querySelectorAll otrzymujesz listę elementów, więc chcąc podpiąć się na każdy z nich potrzebujesz użyć pętli, albo przynajmniej odnieść się do konkretnego elementu przez jego indeks. Możesz alternatywnie skorzystać ze wspomnianego mechanizmu delegacji eventów podpinając się na wspólnego rodzica (lub przodka) linków i w listenerze zmienić klasę klikniętemu linkowi.