Tengo un navegador de hamburguesas. Después de hacer clic, aparece la navegación de la barra lateral de hamburguesas y se oculta después de hacer clic una vez más. Quiero hacerlo para no tener que hacer clic en el botón de la hamburguesa, pero puedo hacer clic en otro lugar (contenedor principal, etc.) y ocultar la barra lateral. Este es el código del botón de la hamburguesa:
function navBurger() { var element = document.querySelector(".navbar"); var burger = document.querySelector(".burger-btn"); element.classList.toggle("extended"); burger.classList.toggle("open"); }Esta parte funciona bien, pero cuando agrego esto:
window.onclick = function() { var element = document.querySelector(".navbar"); var burger = document.querySelector(".burger-btn"); if (element.classList.contains("extended")) { window.onclick = function() { element.classList.remove("extended"); burger.classList.remove("open"); } } }La navegación se ocultará después del primer clic, pero no puedo mostrarla y luego ocultarla después de ese primer clic. Es como si la secuencia de comandos pensara que la navegación todavía tiene esa clase (pero se eliminó) y no permitirá que se abra la barra de navegación. ¿Hay una manera de resolver esto?
En su código original, después de hacer clic la primera vez para abrir el navegador, la ventana al hacer clic eliminaría las clases agregadas al hacer clic en el botón de menú a medida que el evento aparecía. Para solucionar esto, agregue event.stopPropagation() a su controlador de clic de menú.
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
También eliminé el reenlace del controlador onclick, ya que estaba causando que el primer clic no cerrara el menú correctamente.
function navBurger(e) { console.log('button clicked') var element = document.querySelector(".navbar"); var burger = document.querySelector(".burger-btn"); element.classList.toggle("extended"); burger.classList.toggle("open"); // Prevents the window onclick from firing after this function runs // try commenting this out e.stopPropagation(); } window.onclick = function() { console.log('onclick triggered'); var element = document.querySelector(".navbar"); var burger = document.querySelector(".burger-btn"); if (element.classList.contains("extended")) { element.classList.remove("extended"); burger.classList.remove("open"); } } document.querySelector(".burger-btn").addEventListener("click", navBurger); .navbar.extended { background: green; } .burger-btn.open::after { content: "Open"; display: inline; } <nav class="navbar"><button class="burger-btn" type="button">Nav</button></nav>La causa del problema es que el controlador de clics global se reemplaza con una función anidada e incondicional para desactivar el menú de hamburguesas. Un segundo clic abrirá el menú, pero subirá al controlador de la ventana y lo apagará nuevamente.
El controlador global debe determinar si el clic está dentro o fuera del menú extendido antes de desactivarlo. Aplicar el método closest al objetivo del evento de clic puede ayudar con esto.
window.onload = function() { var element = document.querySelector(".navbar"); var burger = document.querySelector(".burger-btn"); window.onclick = function(event) { if( burger.classList.contains("open") && !event.target.closest(".extended") ) { // the click is outside an open extended element element.classList.remove("extended"); burger.classList.remove("open"); } }; }; Lo anterior debería cerrar el menú de hamburguesas si el usuario hace clic fuera del elemento con la clase "extended" . La documentación de JQuery cubre el método closest de jQuery y event.target si desea escribir el código en jQuery.
Tenga en cuenta que la configuración de window.onclick se establece en window.onload para evitar confusiones, y que es mejor reemplazar el uso de las propiedades oneventname de los elementos mediante el uso de llamadas addEventListener en JavaScript.