Estoy buscando una manera de llenar dinámicamente un submenú dependiendo de la selección del menú principal, luego, cuando un usuario hace clic en un elemento en el submenú, llena dos cuadros flexibles con el contenido de otro archivo. No puedo entender cómo apuntar a un flexbox usando JS; o, si eso no es posible, qué podría hacer en su lugar. Por ejemplo:
MENU 1 MENU 2 MENU 3 // user selects menu 2, which populates the submenu from a file ^ submenu 1 submenu 2 submenu 3 // user selects submenu 3, which populates the flexbox containersCONTENEDORES FLEXBOX:
------------------------ ----------------------------------------- | SUBMENU 3 HTML PAGE | | SUBMENU 3 HTML PAGE | | | | | | | | | | has options that | | dynamically populates | | affect the contents | | based on the options selected | | of the other box | | in the other box | | | | | ------------------------ -----------------------------------------es posible? ¿Qué debo buscar para averiguarlo? He buscado en Google sin éxito, no estoy buscando la frase correcta. ¿Qué debería estar buscando?
Aquí hay una posible implementación. Agrega un detector de eventos en cada elemento desencadenante, en mi caso, un button . Cuando se hace clic en el botón, apunta al elemento .flex adyacente al botón e inserta dinámicamente contenido HTML .
const btns = Array.from(document.querySelectorAll('button')) const clearContent = () => { Array.from(document.querySelectorAll('.flex')).forEach(item => item.innerHTML = '') } btns.forEach((btn, index) => { btn.addEventListener("click", () => { clearContent(); btn.parentNode.querySelector('.flex').innerHTML = menuContents[index] }) }) const menuContents = [ '<div>sub 1</div><div>sub 2</div><div>sub 3</div>', '<div>sub 4</div><div>sub 5</div><div>sub 6</div>', '<div>sub 7</div><div>sub 8</div><div>sub 9</div>' ] .flex { text-align: center; display: flex; position: absolute; left: 50%; top: 1.5rem; transform: translateX(-50%); column-gap: 1rem; white-space: nowrap; } .flex:empty { display: none; } .outer { position: relative; } body { display: flex; justify-content: center; gap: 1rem; } <div class="outer"> <button> Menu 1 </button> <div class="flex"></div> </div> <div class="outer"> <button> Menu 2 </button> <div class="flex"></div> </div> <div class="outer"> <button> Menu 3 </button> <div class="flex"></div> </div>