Menu zwijalne poprzez kliknięcie w link

Question

Hej, potrzebuję pomocy. Mam skrypt java na rozwijanie menu, ale chciałabym, żeby to menu zwijało się jak już strona zescrolluje się do odpowiedniego miejsca. Niestety zamyka się dopiero po ponownym kliknięciu na hamburgerka. Szukam już drugi dzień i nic pasującego nie umiem znaleźć :( 

 

<script>

          const menuBtn=document.querySelector('.menu-btn')
          const navlinks=document.querySelector('.nav-links')

          menuBtn.addEventListener('click', ()=>{
            navlinks.classList.toggle('mobile-menu')

          })

</script>

 

Comments

Pokaż kod HTML

---

    <!--Navbar-->
    <nav class="navbar">
      <a href="#"><img src="./images/logo.png" alt="" class="logo-img"></a>
      <div class="logo">
      </div>
      <ul class="nav-links">
        <li><a href="#uslugi">Usługi</a></li>
        <li><a href="#certyfikaty">Certyfikaty</a></li>
        <li><a href="#modele">Produkty</a></li>
        <li><a href="#onas">O nas</a></li>
        <li class="ctn"><a href="#cont">Kontakt</a></li>
      </ul>
      <img src="./images/menu-btn.png" alt="" class="menu-btn">
    </nav>

tyle wystarczy? 

Answer 1

chciałabym, żeby to menu zwijało się jak już strona zescrolluje

jeżeli chodzi Tobie, że gdy kliknie się w link w menu to możesz użyć Event Delegation i zapisać to np. tak

[ on-line ]

const navbar = document.querySelector('.navbar'),
      navlinks = document.querySelector('.nav-links');

navbar.addEventListener('click', (e) => {
  if (e.target.nodeName == 'IMG' && e.target.className == 'menu-btn') {
    e.preventDefault();
    navlinks.classList.toggle('mobile-menu');
  }
  if (e.target.nodeName == 'A') {
    navlinks.classList.remove('mobile-menu');
  }
})

 

---

 

lub tak jak zasugerował @Comandeer

const navbar = document.querySelector('.navbar'),
      navlinks = document.querySelector('.nav-links');

navbar.addEventListener('click', (e) => {
  if (e.target.matches('img.menu-btn')) {
    e.preventDefault();
    navlinks.classList.toggle('mobile-menu');
  }
  if (e.target.matches('a')) {
    navlinks.classList.remove('mobile-menu');
  }
})

 

Comments

Zamiast sprawdzania nodeName i className (zwłaszcza tego drugiego, bo może dawać false negatives, jeśli element ma więcej niż jedną klasę), można użyć matches().