• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

175
Views
problemas al colapsar los menús javascript anidados

Tengo un menú de navegación en la barra lateral (HTML5/CSS/Vanilla JavaScript) que actúa como un acordeón con múltiples niveles de menús anidados. Todo funciona hasta ahora en términos de ocultar y mostrar menús y aplicar los estilos correctos para los distintos estados EXCEPTO por 1 cosa.

Si se expande un menú principal (que muestra un submenú) y uno de sus elementos secundarios también se expande para mostrar un submenú secundario... algo así:

 - Menu Item 1 - Menu Item 2 |_ Item 2.1 |_ Item 2.1.1 |_ Item 2.1.2 |_ Item 2.2 - Menu item 3 |_ Item 3.1

Al hacer clic en cualquier elemento con subelementos (Ej.: Menu Item 2 o Menu Item 2.1 no solo debería ocultar TODOS los elementos del menú (y submenú), sino que también debería colapsar todos los submenús anidados dentro de ese padre para que cuando vuelve a hacer clic en un elemento con submenús (para mostrarlo), todos se "restablecen" a su estado original, PERO esto solo debería aplicarse a los elementos y menús anidados debajo del elemento en el que se hizo clic.

Hacer clic en el Menu Item 2 debería producir esto:

 - Menu Item 1 - Menu Item 2 - Menu item 3 |_ Item 3.1

En cambio, está produciendo esto:

 - Menu Item 1 - Menu Item 2 - Menu item 3

TODOS los submenús (sin importar en qué elemento esté anidado) se contraen y ocultan.

Puedes verlo en este Codepen .

Las líneas correspondientes a esto son

 const allItems = clicked.parentElement.querySelectorAll("li"); const allMenus = clicked.closest('.nav-list').querySelectorAll("ul"); allItems.forEach((item) => item.classList.remove("selected")); allMenus.forEach((menu) => { This.hide(menu); menu.classList.toggle('open'); });

Tiene que ser algo justo en frente de mí, pero parece que no puedo aislarlo. Cualquier ayuda sería muy apreciada. También siéntase libre de criticar cualquier otra cosa que vea que no califique como "mejores prácticas".

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error