¡allá!
Me gustaría preguntarle cómo puedo abrir el menú desplegable correcto con JS. Está funcionando, pero no importa en qué haga clic, siempre me muestra el último div desplegable. El fragmento de código que he marcado debería ayudar con este problema, pero no funciona.
<div class="dropdown-wrapper" data-dropdown> <a class="dropdown-link" href="#" data-dropdown-button>Makeup</a> <div class="dropdown-menu"></div> document.addEventListener("click", e => { const isDropDownButton = e.target.matches("[data-dropdown-button]"); if (!isDropDownButton && e.target.closest("[data-dropdown]") != null) return; let currentDropDown; if (isDropDownButton) { currentDropDown = e.target.closest("[data-dropdown]"); currentDropDown.classList.toggle("active"); } //THIS CODE// document.querySelectorAll("[data-dropdown].active").forEach(dropdown => { if (dropdown === currentDropDown) return; dropdown.classList.remove("active"); }) })¡Gracias!
En JavaScript, está seleccionando el elemento más cercano [desplegable de datos], por lo tanto, agregue esto en las etiquetas DIV.
<div class="dropdown-wrapper" data-dropdown> <a class="dropdown-link" href="#" data-dropdown-button>Makeup</a> <div class="dropdown-menu" data-dropdown> <a class="dropdown-link" href="#" data-dropdown-button>1</a> <a class="dropdown-link" href="#" data-dropdown-button>2</a> <a class="dropdown-link" href="#" data-dropdown-button>3</a> </div> </div>su JavaScript funciona y no es necesario cambiarlo. al hacer clic en los enlaces 1,2,3, agregará una clase = "activo" en el segundo div.