¿Alguien puede verificar el problema con mi navegación básica de varios niveles? En mi menú, cuando hago clic en "Acerca de", funciona correctamente. Pero cuando hago clic en "Perfil" en el menú Acerca de, no funciona debido a que JS está asignando una "pantalla: ninguna" a su menú de subnivel. ¿Alguien puede explicarme qué está mal con mi código? Pensé en la perspectiva de incluso burbujear, pero aunque mi código debería funcionar según el orden de Padre e hijo. Puede alguien ayudarme con 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 === "none") { ul.style.cssText = "display:block"; } else { ul.style.cssText = "display:none"; } }); }); .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>Esto es solo porque su evento se propaga (cuando se hace clic en el contenedor de submenú) ya que la pestaña de perfil está dentro de otro submenú. Simplemente intente agregar un registro de consola dentro del detector de eventos. podías ver que se activaba dos veces. He agregado un método stopPropagation(). Todo este código se puede mejorar un poco y se lo dejo a ustedes. Como sugirió @mplungjan, la delegación de eventos es la forma correcta de hacer esto.
let menus = document.querySelectorAll(".main-navigation ul li a"); menus.forEach((item) => { if (item.parentElement.querySelector("ul")) { item.parentElement.classList.add("has-submenu"); } }); let mn = document.querySelector(".main-navigation"); mn.addEventListener("click", () => { <!-- alert("I'm main navigation and now i'm clicked"); --> }) let submenu = document.querySelectorAll(".has-submenu"); submenu.forEach((item) => { item.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); let ul = e.target.parentElement.querySelector("ul"); let cs = window.getComputedStyle(ul).display; if (cs === "none") { ul.style.cssText = "display:block"; } else { ul.style.cssText = "display:none"; } }); }); .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>