Estoy tratando de hacer una animación para mi mega menú desplegable y me encontré con un problema en el que solo funciona cuando coloco el cursor sobre el botón del personalizador, lentamente. No puedo entender por qué. ¿Puede alguien más experimentado con JavaScript ayudarme? Aquí está mi código JavaScript, el código completo (html, scss) se puede encontrar aquí (enlace codepen):
const button = document.querySelector(".dropdown"); button.addEventListener("mouseenter", (e) => { document .querySelector(".dropdown-content") .classList.toggle("scale-up-ver-top"); });document.querySelector(".dropdown") solo devuelve el primer elemento encontrado con la clase dropdown . Necesita querySelectorAll , y luego necesita recorrer todos los elementos y agregar un oyente mousenter a cada uno.
Si hace referencia a que tiene que alternar dos veces, funciona, porque configuró classList.toggle , lo que significa que en la primera vez, agregará la clase "scale-up-ver-top" al elemento y la segunda vez encontrará el antiguo "scale-up-ver-top" y lo eliminará. Una posible solución es agregar (toggle, true) lo que significa que solo agregará clase al elemento.
const button = document.querySelector(".dropdown"); button.addEventListener("mouseenter", (e) => { document .querySelector(".dropdown-content") .classList.toggle("scale-up-ver-top", true);Si se refiere al problema, desea asignar todos los botones, use:
const button = document.querySelectorAll(".dropdown"); button.forEach(item =>{ item.addEventListener("mouseenter", (e) => { document .querySelector(".dropdown-content") .classList.toggle("scale-up-ver-top"); document .querySelector(".dropdown-content") .classList.toggle("scale-up-ver-top"); }); })Hay dos cosas que podrías hacer para que funcione.
Primero, document.querySelector() solo devuelve un solo elemento, que responde por qué solo funciona el botón del personalizador. Para solucionar esto, debe usar document.querySelectorAll(".dropdown") .
En segundo lugar, dentro del detector de eventos, entiendo que desea seleccionar ".dropdown-content" del menú desplegable que se está desplazando. Pero document.querySelector(".dropdown-content") simplemente seleccionará todo el contenido desplegable en el DOM. Para solucionar esto, debe reemplazar el document con el elemento desplegable actual.
Aquí está el guión completo que he reescrito desde su codepen:
// select all dropdown buttons const buttons = document.querySelectorAll(".dropdown"); // loop through each button buttons.forEach(button => { button.addEventListener("mouseenter", e => { // e.target => the one that you're hovering e.target .querySelector(".dropdown-content") .classList.toggle("scale-up-ver-top"); }); });Compruébalo en este codepen , también agregué un evento mouseleave.