Tengo un proyecto de página de inicio de varias secciones y quiero agregar un ícono de Hambuger en una consulta de medios específica cuando hago clic en él, muestra los elementos de la barra de navegación en un bloque y cuando vuelvo a hacer clic desaparece >>> mi problema es cuando uso el método de alternar clase, no alterna la clase y no funciona incluso cuando lo pruebo en mi consola
#Mi código#
function myfunction() { const lis = document.querySelectorAll("li"); const ul = document.querySelector("ul"); const icon=document.querySelector("fa fa-bars"); icon.addEventListener("click",()=>{ lis.classList.toggle("lessSize"); }) }** Nota: no quiero usar la biblioteca jQuery en este quiero hacerlo sin ella **
classList.toggle() funcionará bien. Su código no funciona por dos razones.
En primer lugar, fa fa-bars no es un selector válido. Supongo que quiere usar document.querySelector('.fa.fa-bars') en su lugar.
En segundo lugar, querySelectorAll() devuelve una lista de nodos, no un solo elemento. Como tal, debe recorrerlos y llamar a classList.toggle() en cada elemento individual.
Con esos cambios realizados, el código correcto debería verse así:
function myfunction() { const lis = document.querySelectorAll("li"); const ul = document.querySelector("ul"); const icon = document.querySelector(".fa.fa-bars"); icon.addEventListener("click", () => { lis.forEach(li => li.classList.toggle('lessSize')); }) } Tenga en cuenta que este ejemplo asume que su uso de querySelector() para recuperar el elemento .fa-bars es correcto, y que solo hay 1 de esos elementos en el DOM. Si hay varios, necesitará otro bucle allí también.
Además de la respuesta del comentario, esto no funcionará porque está apuntando a muchos elementos de la lista con
const lis = document.querySelectorAll("li");por lo que esta clase se alternará solo en el primer elemento de la lista que se encuentre, debe recorrerlos así:
lis.forEeach(li => { li.classList.toggle("lessSize") })