Estoy creando un mega menú que tiene un botón de cierre en cada menú que funciona muy bien. Sin embargo, necesito escribir algo de JavaScript que diga: 'si hace clic fuera de un mega menú cuando está abierto, ciérrelo'.
He escrito un guión a continuación. Detecta cuando un usuario hace clic dentro del mega menú, pero no cuando hace clic fuera de él. En este caso, eliminar la clase display-on que hace que un elemento tenga display: block; .
const dropDownMenu = document.getElementsByClassName("drop-down"); for (let i = 0; i < dropDownMenu.length; i++) { dropDownMenu[i].addEventListener("click", (e) => { // If clicking in any area that has drop-down class, do nothing. if (dropDownMenu[i].contains(e.target)) { console.log("clicked in mega menu area"); // If clicking in any area outside drop-down class, remove display-on class which closes the menu. } else { console.log("clicked outside mega menu area"); document.querySelector(".display-on").classList.remove("display-on"); } }); }Demostración de trabajo si es necesario se puede ver aquí .
Gracias.
Del comentario anterior...
"Por supuesto, el OP necesita registrar el manejo de eventos 'fuera del menú desplegable' también fuera de cualquier elemento clasificado
drop-down.document.bodypodría ser el elemento correcto para escuchar".
... algo como esto ...
function handleDropDownMenuBehavior(evt) { if (evt.target.closest('.drop-down') === null) { document.querySelector(".display-on").classList.remove("display-on"); console.log("clicked outside mega menu area"); } else { console.log("clicked in or at mega menu area"); } } document.body.addEventListener('click', handleDropDownMenuBehavior);Puede agregar un detector de eventos global al documento que verifique si lo que se hizo clic no es el mega menú. avísame si necesitas ayuda adicional :)
document.onclick = (e) => { if (e.target.contains(document.getElementsByClassName("drop-down")[0])) { console.log('close mega menu'); document.getElementsByClassName("drop-down")[0].classList.remove("display-on"); } }