Creé una navegación múltiple HTML muy básica y funciona desde el primer nivel. Pero no funciona en el menú de segundo nivel. Por ejemplo. En mi menú, la página "Acerca de" tiene un submenú y dentro del menú Acerca de, el menú "Perfil" tiene otros submenús. Pero cuando hago clic en el menú "Perfil", no funciona. ¿Alguien puede ayudarme a arreglar esto? ¡Gracias de antemano!
let menus = document.querySelectorAll(".main-navigation ul li a"); menus.forEach((item)=>{ if(item.parentElement.querySelector("ul")) { item.parentElement.classList.add("has-submenu"); } }); let submenu = document.querySelectorAll(".has-submenu"); submenu.forEach((item)=>{ item.addEventListener("click",(e)=>{ e.preventDefault(); let ul = e.target.parentElement.querySelector("ul"); let cs = window.getComputedStyle(ul).display; if(cs==="block") { ul.style.cssText="display:none"; } else { ul.style.cssText="display:block"; } }); }); .main-navigation ul {list-style:none;margin:0;padding:0;font-family:arial;} .main-navigation ul li {padding:.35rem;background:#f9f9f9;} .main-navigation ul li ul {padding-left:1rem;display:none;} .main-navigation ul li a {display:block;text-decoration:none;} <div class="main-navigation"> <ul> <li><a href="">Home</a></li> <li><a href="">About +</a> <ul> <li><a href="">Profile +</a> <ul> <li><a href="">History</a></li> <li><a href="">Management</a></li> </ul> </li> <li><a href="">Vision</a></li> <li><a href="">Mission</a></li> </ul> </li> <li><a href="">Services +</a> <ul> <li><a href="">Web Design</a></li> <li><a href="">Web Development</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </div>La cosa es que todo funciona en tu código. Pero al hacer clic en un .has-submenu que se encuentra dentro .has-submenu se activa el detector de eventos para cada elemento. Agregué una topPropagation para que el evento no aparezca, esto evitará efectivamente que se .has-submenu .
let menus = document.querySelectorAll(".main-navigation ul li a"); menus.forEach((item)=>{ if(item.parentElement.querySelector("ul")) { item.parentElement.classList.add("has-submenu"); } }); let submenu = document.querySelectorAll(".has-submenu"); submenu.forEach((item)=>{ item.addEventListener("click",(e)=>{ e.preventDefault(); e.stopImmediatePropagation(); // HERE let ul = e.target.parentElement.querySelector("ul"); console.log(ul); let cs = window.getComputedStyle(ul).display; if(cs==="block") { ul.style.cssText="display:none"; } else { ul.style.cssText="display:block"; } }); }); .main-navigation ul {list-style:none;margin:0;padding:0;font-family:arial;} .main-navigation ul li {padding:.35rem;background:#f9f9f9;} .main-navigation ul li ul {padding-left:1rem;display:none;} .main-navigation ul li a {display:block;text-decoration:none;} <div class="main-navigation"> <ul> <li><a href="">Home</a></li> <li><a href="">About +</a> <ul> <li><a href="">Profile +</a> <ul> <li><a href="">History</a></li> <li><a href="">Management</a></li> </ul> </li> <li><a href="">Vision</a></li> <li><a href="">Mission</a></li> </ul> </li> <li><a href="">Services +</a> <ul> <li><a href="">Web Design</a></li> <li><a href="">Web Development</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </div>