En el fragmento a continuación, estoy usando un menú desplegable personalizado desplegable simple (no un menú de selección) y estoy tratando de mostrar contenido dinámico según el elemento del menú elegido. No estoy seguro de adónde ir desde este punto.
¿Cómo muestro contenido diferente según la selección desplegable?
let dropdown = document.querySelector('.dropdown-select'); dropdown.addEventListener('click', (e) => { if (dropdown.classList.contains('closed')) { dropdown.classList.remove('closed'); } else { dropdown.classList.add('closed'); } }); .active { color: purple; } .dropdown-select { transition: all 0.2s ease; overflow: hidden; cursor: pointer; border-top: 1px solid #E0E5EC; } .dropdown-select__title { display: flex; align-items: center; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #E0E5EC; } .dropdown-select__title h6 { font-size: 0.75rem; line-height: 0.75rem; letter-spacing: 1px; text-transform: uppercase; } .dropdown-select__title img { width: 1.5rem; height: 1.5rem; margin-left: auto; transition: all 0.2s ease; } .dropdown-select ul { margin: 0; padding: 0; list-style-type: none; } .dropdown-select .menu { transition: all 0.2s ease; } .dropdown-select .menu li { font-size: 1rem; line-height: 1.5rem; padding: 1rem 0; font-weight: 800; color: #005fec; } .dropdown-select__title, .dropdown-select .menu { padding-left: 1.5rem; padding-right: 1.5rem; } .dropdown-select.closed .menu { height: 0; } .dropdown-select.closed img { transform: rotate(180deg); } .tabbed-content { padding: 0 1.5rem; margin-top: 2rem; } <main> <div class="dropdown-select closed"> <div class="dropdown-select__title"> <h6>Other Releases</h6> <img src="https://cdn-icons-png.flaticon.com/24/25/25243.png" alt="down caret "> </div> <ul class="menu"> <li>Fall 2021</li> <li>Summer 2021</li> </ul> </div> <div class="tabbed-content"> <div id="1">Fall 2021</div> <div id="2">Summer 2021</div> </div> </main>Puede usar atributos de datos para almacenar qué contenido desea mostrar cuando el usuario haga clic en él.
Para hacer esto, agregue un detector de eventos de click a cada opción que recorrerá cada opción de contenido posible y mostrará aquella cuya id coincida con el valor del atributo de datos mientras oculta todas las demás.
let dropdown = document.querySelector('.dropdown-select'); dropdown.addEventListener('click', (e) => { if (dropdown.classList.contains('closed')) { dropdown.classList.remove('closed'); } else { dropdown.classList.add('closed'); } }); const options = document.querySelectorAll('.menu li') const results = document.querySelectorAll('.tabbed-content div') options.forEach(e => e.addEventListener('click', function(){ results.forEach(f => f.style.display = f.id == e.dataset.target ? "block" : "none") })) .active { color: purple; } .dropdown-select { transition: all 0.2s ease; overflow: hidden; cursor: pointer; border-top: 1px solid #E0E5EC; } .dropdown-select__title { display: flex; align-items: center; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #E0E5EC; } .dropdown-select__title h6 { font-size: 0.75rem; line-height: 0.75rem; letter-spacing: 1px; text-transform: uppercase; } .dropdown-select__title img { width: 1.5rem; height: 1.5rem; margin-left: auto; transition: all 0.2s ease; } .dropdown-select ul { margin: 0; padding: 0; list-style-type: none; } .dropdown-select .menu { transition: all 0.2s ease; } .dropdown-select .menu li { font-size: 1rem; line-height: 1.5rem; padding: 1rem 0; font-weight: 800; color: #005fec; } .dropdown-select__title, .dropdown-select .menu { padding-left: 1.5rem; padding-right: 1.5rem; } .dropdown-select.closed .menu { height: 0; } .dropdown-select.closed img { transform: rotate(180deg); } .tabbed-content { padding: 0 1.5rem; margin-top: 2rem; } .tabbed-content div{ display:none; } <main> <div class="dropdown-select closed"> <div class="dropdown-select__title"> <h6>Other Releases</h6> <img src="https://cdn-icons-png.flaticon.com/24/25/25243.png" alt="down caret "> </div> <ul class="menu"> <li data-target="1">Fall 2021</li> <li data-target="2">Summer 2021</li> </ul> </div> <div class="tabbed-content"> <div id="1" style="display:block">Fall 2021</div> <div id="2">Summer 2021</div> </div> </main>