Estoy tratando de usar consultas de medios y javascript para hacer un menú desplegable para mi página. Tengo el contenido que quiero que esté en el menú en un <div> marcado con una clase, en este caso. class="other-pages" . Mi consulta de medios tiene 2 clases: .other-pages.closed y .other-pages.open . Mi objetivo es usar javascript para cambiar la clase una vez que la consulta de medios esté activa en la clase cerrada. Luego haga un botón que tengo, cambie la clase a la versión abierta.
Así que esto es lo que tengo hasta ahora.
let menuContentBase = document.getElementsByClassName('.other-pages'); let mediaQueryMax = window.matchMedia('(max-width: 1080px)'); if (mediaQueryMax.matches) { menuContentBase.classlist.remove('.other-pages'); menuContentBase.classlist.add('other-pages.closed'); } Cuando cargo esto en mi navegador y miro en el depurador, sin embargo, dice que menuContentBase.classlist no está definido.
No estoy completamente seguro de qué hacer desde aquí.
Gracias por cualquier consejo/recomendación que pueda tener.
Es un simple cambio
let element = document.querySelector(".mq-value") element.addEventListener('click', (e)=>{ e.target.classList.contains('open') ? e.target.classList.remove('open') : e.target.classList.add('open') }) .open{ color:red } <div class="mq-value open"> toggle </div>Creo que el problema está en el nombre de la clase. Cuando se trata de document.getElementsByClassName , no necesita poner . antes del nombre de la clase. reemplaza esto
let menuContentBase = document.getElementsByClassName('.other-pages');con este
let menuContentBase = document.getElementsByClassName('other-pages');Si desea obtener más información al respecto, puede consultar https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Además, lo mismo para classList no classlist y la L debe estar en mayúsculas.
if (mediaQueryMax.matches) { menuContentBase.classList.remove('other-pages'); menuContentBase.classList.add('other-pages.closed'); }Prueba este y hazme saber si funciona o no. ¡Gracias!