Construyendo un mega menú que en su mayoría funciona. El último paso que estoy tratando de lograr es cuando un usuario hace clic en un elemento de mega menú, cierra todos los demás mega menús que están abiertos.
Aquí está el código JavaScript que tengo a continuación. Actualmente, el megamenú alterna correctamente al hacer clic en cada enlace de navegación principal, pero actualmente no oculta otros megamenús cuando un megamenú está abierto.
const navLink = document.getElementsByClassName("menu-item-has-children"); // Loop over main navigation links for (let i = 0; i < navLink.length; i++) { // Grab specific ID that each mega menu has const menuId = document.querySelector(`#${dropDownMenu[i].id}`); // On click of top nav items, toggle mega menu visibility (this works). navLink[i].addEventListener("click", () => { menuId.classList.toggle("display-on"); }); // If the mega menu is open (display-on class is active), then don't show the other mega menus. // (This does not work). return menuId.classList.contains("display-on") ? (menuId.style.display = "none") : ""; }Enlace a la demostración en vivo que incluye HTML aquí si es necesario.
Gracias.
He bifurcado tu ejemplo y lo he simplificado. Puedes ver el código aquí .
Hago uso de Event Delegation . Esto le permite manejar todos los eventos de clic (abrir menú desplegable, cerrar menú desplegable a través del botón Cerrar) en un solo controlador de eventos (línea 14 en el ejemplo) que, en mi opinión, es más fácil de leer y mantener.
El ejemplo también cierra un menú desplegable ya abierto (ver línea 21 - 23).
También agregué un controlador de eventos al objeto del documento para manejar los clics fuera de un menú desplegable para cerrarlo como lo hizo usted.
Espero que resuelva tu problema.
Saludos