Estoy construyendo un menú desplegable. Tal como está, cuando abro un submenú, permanece abierto, incluso si abro un segundo submenú. Cuando abro el segundo submenú, debería cerrar cualquier otro menú abierto.
const submenuLinks = document.querySelectorAll('.has-submenu > a'); submenuLinks.forEach(element => element.addEventListener('click', function(e) { var submenu = element.nextElementSibling; if (submenu.classList.contains('menu-hide')) { submenu.classList.add('menu-show'); submenu.classList.remove('menu-hide'); } else { submenu.classList.add('menu-hide'); submenu.classList.remove('menu-show'); } })); .menu-hide { display: none; } .menu-show { display: block; } <nav> <ul class="menu"> <li> <a href="#">Menu Item 1</a> </li> <li class="has-submenu"> <a href="#">Menu Item 2 »</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> <li class="has-submenu"> <a href="#">Menu Item 3 »</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> </ul> </nav>.menu-showPrueba esto
const submenuLinks = document.querySelectorAll('.has-submenu > a'); submenuLinks.forEach(element => element.addEventListener('click', function(e) { var submenu = element.nextElementSibling; if (submenu.classList.contains('menu-show')) { submenu.classList.remove('menu-show'); } else { submenuLinks.forEach(a => a.nextElementSibling.classList.remove('menu-show')); submenu.classList.add('menu-show'); } })); .menu-sub { display: none; } .menu-show { display: block; } <nav> <ul class="menu"> <li> <a href="#">Menu Item 1</a> </li> <li class="has-submenu"> <a href="#">Menu Item 2 »</a> <ul class="menu-sub"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> <li class="has-submenu"> <a href="#">Menu Item 3 »</a> <ul class="menu-sub"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> </ul> </nav>antes de su lógica que oculta el submenú actual, puede ocultar cada submenú (ul con clase 'menu-sub'). De esta forma, solo se expandirá el submenú actual. Aquí está el código javascript editado:
const submenuLinks = document.querySelectorAll('.has-submenu > a'); submenuLinks.forEach((element) => element.addEventListener('click', function (e) { var allSubmenus = document.querySelectorAll('.menu-sub'); allSubmenus.forEach((submenu) => { submenu.classList.remove(...submenu.classList); submenu.classList.add('menu-sub'); submenu.classList.add('menu-hide'); }); var currentSubmenu = element.nextElementSibling; if (currentSubmenu.classList.contains('menu-hide')) { currentSubmenu.classList.add('menu-show'); currentSubmenu.classList.remove('menu-hide'); } else { currentSubmenu.classList.add('menu-hide'); currentSubmenu.classList.remove('menu-show'); } }) );Lo que hice allí extra fue eliminar todas las clases de los submenús, volver a agregar las clases 'menu-sub' y 'menu-hide'.
Debe recorrer todos los ul para verificar las clases. Comenté lo que agrego a tu código js.
const uls = document.querySelectorAll('.menu-sub'); uls.forEach(a => { if (a.classList.contains('menu-show')) { a.classList.remove('menu-show') a.classList.add('menu-hide') } }) const submenuLinks = document.querySelectorAll('.has-submenu > a'); submenuLinks.forEach(element => element.addEventListener('click', function(e) { /* start */ const uls = document.querySelectorAll('.menu-sub'); uls.forEach(a => { if (a.classList.contains('menu-show')) { a.classList.remove('menu-show') a.classList.add('menu-hide') } }) /* end */ var submenu = element.nextElementSibling; if (submenu.classList.contains('menu-hide')) { submenu.classList.add('menu-show'); submenu.classList.remove('menu-hide'); } else { submenu.classList.add('menu-hide'); submenu.classList.remove('menu-show'); } })); .menu-hide { display: none; } .menu-show { display: block; } <nav> <ul class="menu"> <li> <a href="#">Menu Item 1</a> </li> <li class="has-submenu"> <a href="#">Menu Item 2 »</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> <li class="has-submenu"> <a href="#">Menu Item 3 »</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> </ul> </nav>