• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

172
Views
La animación JS solo afecta un elemento y apenas funciona

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"); });
about 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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.

about 3 years ago · Juan Pablo Isaza Report

0

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"); }); })
about 3 years ago · Juan Pablo Isaza Report

0

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.

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error