单击链接响应模式后自动关闭导航栏

Question

 I add also my CSS code of navbar, all is working well, only I need is auto close when click on link /* navbar */ nav{ height: 4rem; width: 100vw; background-color: #efefef; box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2); display: flex; position: fixed; z-index: 10; } /*Styling logo*/ /*.logo{ padding:1vh 1vw; text-align: center; }.logo img { height: 5rem; width: 5rem; } */ /*Styling Links*/.nav-list{ display: flex; list-style: none; width: 80vw; padding: 0 0.7vw; justify-content:center; align-items: center; margin: 0 auto; text-transform: uppercase; }.nav-list li a{ text-decoration: none; margin: 0 1em; color: #000; font-weight: 600; }.nav-list li a:hover { color: #1abc9c; }.nav-list li { position: relative; color: #000; }.nav-list li a::before { content: ""; display: block; height: 3px; width: 0%; background-color: #1abc9c; position: absolute; transition: all ease-in-out 250ms; margin: 0 0 0 10%; }.nav-list li a:hover::before{ width: 80%; } /*Styling Hamburger Icon*/.hamburger div{ width: 30px; height:3px; background: #000; margin: 5px; transition: all 0.3s ease; }.hamburger{ display: none; } /*Stying for small screens*/ @media screen and (max-width: 800px){ nav{ position: fixed; z-index: 3; }.hamburger{ display:block; position: absolute; cursor: pointer; right: 5%; top: 50%; transform: translate(-5%, -50%); z-index: 2; transition: all 0.7s ease; }.nav-list { position: fixed; background: #efefef; height: 100vh; width: 100%; flex-direction: column; clip-path: circle(50px at 90% -20%); -webkit-clip-path: circle(50px at 90% -10%); transition: all 1s ease-out; pointer-events: none; }.nav-list.open{ clip-path: circle(1000px at 90% -10%); -webkit-clip-path: circle(1000px at 90% -10%); pointer-events: all; }.nav-list li{ opacity: 0; margin-top: 3em; }.nav-list li:nth-child(1){ transition: all 0.5s ease 0.2s; }.nav-list li:nth-child(2){ transition: all 0.5s ease 0.4s; }.nav-list li:nth-child(3){ transition: all 0.5s ease 0.6s; }.nav-list li:nth-child(4){ transition: all 0.5s ease 0.7s; }.nav-list li:nth-child(5){ transition: all 0.5s ease 0.8s; }.nav-list li:nth-child(6){ transition: all 0.5s ease 0.9s; margin: 0; }.nav-list li:nth-child(7){ transition: all 0.5s ease 1s; margin: 0; } li.fejd{ opacity: 1; } } /*Animating Hamburger Icon on Click*/.toggle.line1{ transform: rotate(-45deg) translate(-5px,6px); }.toggle.line2{ transition: all 0.7s ease; width:0; }.toggle.line3{ transform: rotate(45deg) translate(-5px,-6px); } /* /navbar end */

I would like to close navbar when a user clicks on link in responsive mode. I have tried a few examples but it doesn't work for me. Thank you very much!

<nav class="navBar" id="navbar">
      <div class="hamburger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
     </div>`
 


      <ul class="nav-list" id="menu">
            <li><a href="#" class="nav-item">Accueil</a></li>
            <li><a href="#parents" class="nav-item">Parents</a></li>
            <li><a href="#about-section" class="nav-item">A propos</a></li>
            <li><a href="#contact" class="nav-item">Temoignagez</a></li>
   </ul>
</nav>

This is my js code. All is working well! I only need to close nav when an user clicks on links // navbar

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-list");
const links = document.querySelectorAll(".nav-list li");

hamburger.addEventListener('click', ()=>{
   //Animate Links
    navLinks.classList.toggle("open");
    links.forEach(link => {
        link.classList.toggle("fejd");
        
    });

    //Hamburger Animation
    hamburger.classList.toggle("toggle");
});

const navToggle = document.getElementById('nav-toggle');
const navLink = document.querySelectorAll('.navLink').parentElement;

navToggle.addEventListener('click', () => {
    document.body.classList.toggle('nav-open');
    
});


 </script>

Answer 1

you can use foreach to apply addeventlistener to all elements

 document.querySelectorAll('.nav-item').forEach(link=>{ link.addEventListener('click', () => { alert(); }) })