Para evitar repetir código, necesitas crear una función que puedas ejecutar varias veces y asignarla a dos o más eventos. Luego, en el evento, asignas solo el nombre de esa función.
La idea es que el menú se cierre con clic en la "hamburguesa" y en cualquier elemento de la lista que contiene el menú. No importa si también escuchas clics en los enlaces (a menos que canceles el evento con event.preventDefault()
) que, de ser el caso, también desde ahí puedes ejecutar la función.
Aprovechando que ya se tiene la función, también puedes cerrar el menú cuando se haga clic fuera de él.
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
// Modifiqué esta variable para poder probar
const lock = document.body;
// Crea una función para abrir o cerrar menú
function menuToggle() {
console.log('Abrir o cerrar menú');
navLinks.classList.toggle("open");
links.forEach(link =>{
link.classList.toggle("fade");
lock.classList.toggle("lock");
});
}
// En el evento asigna la función creada previamente
hamburger.addEventListener("click", menuToggle);
// También la lista va a ejecutarla en cada clic
navLinks.addEventListener("click", menuToggle);
links.forEach(link => {
// No importa si escuchas clic también en los enlaces
link.addEventListener('click', e => {
console.log('Clic en enlace');
});
});
// ¿Cerrar el menú cuando se haga clic fuera de él?
document.addEventListener('click', e => {
// e.target es el elemento donde se hizo clic
// Hay que asegurar que:
// 1 - El menú está abierto
// 2 - El clic no fue en la hamburguesa
// 3 - El clic no fue en el menú
// 4 - Tampoco fue en los enlaces del menú
if(
navLinks.classList.contains('open') // 1
&& e.target != hamburger // 2
&& e.target != navLinks // 3
&& !navLinks.contains(e.target) // 4
) {
console.log('Clic fuera del menú');
// Cerrar menú
menuToggle();
}
});
.lock { overflow: hidden; }
.nav-links { display: none; }
.nav-links.open { display: block; }
p { min-height: 120vh; }
<span class="hamburger">☰</span>
<ul class="nav-links">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
<p>Este es solo para agregar barra de desplazamiento.</p>