Estoy construyendo un menú sidenav. Quiero trabajar en el estilo directamente en el archivo css en lugar del código Javascript como se muestra a continuación.
Por ejemplo: dropContent.style.display === "block" y "none", desearía que hubiera una clase para modificar y no agregar valores css dentro del código js. Es posible ?
Referencias: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
var dropdown = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("activate"); var dropContent = this.nextElementSibling; if (dropContent.style.display === "block") { dropContent.style.display = "none"; } else { dropContent.style.display = "block"; } }); }En tu CSS:
.hidden { display: none; }En tu JS:
if (element.classList.contains("hidden")) { element.classList.remove("hidden"); } else { element.classList.add("hidden"); } Asegúrese de que su elemento tenga el block de propiedades de visualización para comenzar y creo que esto debería darle lo que desea.
Editar: como señala @tacoshy, está la función de alternar, que es mucho más clara:
element.classList.toggle("hidden");