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".