我如何在更少的代码行集成?

Question

我是JavaScript新手。我已经在我的导航菜单中拥有了我想要的功能，但我认为以一种不正确的方式，因为我重复代码，我找不到用更少的行来完成它的方法。

HTML:

<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>

JavaScript:

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");
});

Answer 1

您可以编写一个简单的for来添加您需要的所有事件

我添加了一个背景红色的类，你正在使用的切换，所以你可以看到它的工作。

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>