Intenté agregar una función de alternar simple a la clase desplegable-btn que a su vez agrega la clase activa (que está configurada para mostrar: bloque;) en la clase ul, ¿estoy haciendo algo mal aquí?
https://jsfiddle.net/q45yc3vt/10/
HTML
<nav class="admin-sidebar sidebar"> <div class="sidebar-nav"> <li><a href="#" class="dropdown-btn"><i class="fas fa-address-card"></i><span>Dropdown</span><i class="fas fa-angle-down"></i></a></li> <ul class="options"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </div> <nav/>CSS
.sidebar-nav { display: grid; gap: 15px; padding: 15px; } .sidebar-nav li { background: #f0f7ff; border-radius: 4px; line-height: 2; cursor: pointer; font-weight: 500; transition: 150ms ease; position: relative; } .options { display: none; } .options.active { display: block; }JS
const dropdown = document.querySelector('.dropdown-btn'); dropdown.addEventListener('click', function() { dropdown.classList.toggle('active'); });Cuando hace clic en el botón, debe alternar la clase activa en el elemento ul , que ha configurado display:none .
const dropdown = document.querySelector('.dropdown-btn'); const options = document.querySelector('.options'); dropdown.addEventListener('click', function() { options.classList.toggle('active'); }); .sidebar-nav { display: grid; gap: 15px; padding: 15px; } .sidebar-nav li { background: #f0f7ff; border-radius: 4px; line-height: 2; cursor: pointer; font-weight: 500; transition: 150ms ease; position: relative; } .options { display: none; } .options.active { display: block; } <nav class="admin-sidebar sidebar"> <div class="sidebar-nav"> <li><a href="#" class="dropdown-btn"><i class="fas fa-address-card"></i><span>Dropdown</span><i class="fas fa-angle-down"></i></a></li> <ul class="options"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </div> <nav/>