Javascript menu usunięcie klasy

pytanie zadane 4 listopada 2018 w JavaScript przez Pawel82 Użytkownik (740 p.)
edycja 4 listopada 2018 przez Pawel82

Witam mam kod który pokazuje menu responsywne, chciałbym żeby po kliknięciu w dowolną pozycję menu, menu zostało ukryte. Wiem że trzeba usunąć klasę is-active.

  var burger = document.querySelector('.navbar-burger');
  var menu = document.querySelector('.navbar-menu');
  if (burger !== null) {
  burger.addEventListener('click', function() {
  burger.classList.toggle('is-active');
  menu.classList.toggle('is-active');

  });
 }

 <nav class="navbar" role="navigation" aria-label="navigation">
      <div class="navbar-brand">
        <a href="home" class="navbar-item">Logo</a>
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div id="menu" class="navbar-menu">
        <div class="navbar-end">
          <a href="#" class="navbar-item">Home</a>
          <a href="#" class="navbar-item">O mnie</a>
          <a href="#" class="navbar-item">Zdjęcia</a>
          <div class="navbar-item has-dropdown dropdown">
            <a href="#" class="navbar-link">Dropdown</a>
            <div class="navbar-dropdown">
              <a href="#" class="navbar-item">Drop 1</a>
              <a href="#" class="navbar-item">Drop 2</a>
              <a href="#" class="navbar-item">Drop 3</a>
            </div>
          </div>
          <a href="#" class="navbar-item">Kontakt</a>
        </div>
      </div>

    </nav>

1 odpowiedź

odpowiedź 4 listopada 2018 przez arces Pasjonat (17,700 p.)

Musisz dodać na każdy element menu (link) addEventListener na 'click', który będzie usuwał klasę z menu i tyle. Jeżeli to napisałeś sam, to nie będziesz miał problemu z napisaniem tego co Ci podałem.

Pamiętaj, że w tym przypadku musisz zastosować querySelectorAll dla wszystkich elementów menu oraz później forEach natych elementach, a dopiero później addEventListener.

Powinno to wyglądać mniej więcej tak:

var links = document.querySelectorAll(element wskazujący na linki);
links.forEach(el => el.addEventListener('click', function () {
menu.classList.remove('is-active');
});

Pokaż 6 poprzednich komentarzy

komentarz 4 listopada 2018 przez Pawel82 Użytkownik (740 p.)

@Tomek Sochacki,
aż tak nie znam javascript ale zainteresował mnie wątek o event delegation. Tylko mnie wiem jak się za to zabrać

komentarz 4 listopada 2018 przez Pawel82 Użytkownik (740 p.)

@arces,
niestety nie

komentarz 4 listopada 2018 przez arces Pasjonat (17,700 p.)

@Tomek Sochacki, pokażesz jak to zrobić w tym przypadku?

komentarz 4 listopada 2018 przez Tomek Sochacki Ekspert (227,510 p.)

https://codepen.io/anon/pen/QJwyvx?editors=1011

Tu masz prosty przykład. Tworzymy listę ul, w niej różne elementy li i nasłuchiwanie na click ustawiamy tylko dla całej listy. Następnie wewnątrz callbacka sprawdzamy, czy kliknięty został element li i tylko wtedy rzucamy logiem w konsoli - poklikaj sobie w elementy.