how can I integrate in fewer lines of code? [duplicate]-CodePudding

hi i am new in java script and i already have the functionality i wanted in my navigation menu but i think not in a correct way because i repeat code and i can't find the way to do it in less lines, thanks in advance for your help.

html code

<nav class="nav">
            <a href="#">
                <img src="" alt="">
            </a>
            <butoon class="toggle" aria-label="Abrir menú">
                <i class='bx bx-menu'></i>
            </butoon>
            <ul class="nav-menu">
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#">Inicio</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#acerca">Acerca de</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#eventos">Eventos</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#servicios">Servicios</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#resultados">Resultados</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#galeria">Galería</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link nav-menu-link_active" href="#contacto">Contacto</a></li>
                </ul>          
        </nav>

js Code

const navToggle = document.querySelector(".toggle");
const navMenu = document.querySelector(".nav-menu");
const navItems = document.querySelectorAll(".nav-menu-item");

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

navItems[0].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[1].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[2].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[3].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[4].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[5].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[6].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});

CodePudding user response：

You can write a simple for to add all the events you need

I added a background red on the class you're using as the toggle so you can see it works.

const navToggle = document.querySelector(".toggle");
const navMenu = document.querySelector(".nav-menu");
const navItems = document.querySelectorAll(".nav-menu-item");

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

for (let i = 0; i < navItems.length; i  ) {
  navItems[i].addEventListener("click", () => {
    navMenu.classList.toggle("nav-menu_visible");
  })
}

.nav-menu_visible {
  background-color: red
}

<nav class="nav">
  <a href="#">
    <img src="" alt="">
  </a>
  <butoon class="toggle" aria-label="Abrir menú">
    <i class='bx bx-menu'></i>
  </butoon>
  <ul class="nav-menu">
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#">Inicio</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#acerca">Acerca de</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#eventos">Eventos</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#servicios">Servicios</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#resultados">Resultados</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#galeria">Galería</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link nav-menu-link_active" href="#contacto">Contacto</a></li>
  </ul>
</nav>