0
145
VistasBucle y agregue un detector de eventos al elemento
Escribí un montón de códigos que expanden mi acordeón pero aquí hay un problema. Cuando hago clic en el botón para expandir el cuerpo del acordeón, mi oyente llama dos veces.
¿Alguien se enfrentó a este problema?
const accordionToggler = document.querySelectorAll('.accordion-toggler'); // expanding accordion by clicking on a single accordion toggler accordionToggler.forEach(toggler => { toggler.addEventListener('click', (e) => { const caret = toggler.querySelector('.chevron-caret'); // chevron ico if (caret.classList.contains('rotate')) { caret.classList.remove('rotate') } else { caret.classList.add('rotate') } if (e.currentTarget.nextElementSibling.style.maxHeight === '' || e.currentTarget.nextElementSibling.style.maxHeight === '0px') { e.currentTarget.nextElementSibling.style.maxHeight = toggler.nextElementSibling.scrollHeight + 'px'; } else { e.currentTarget.nextElementSibling.style.maxHeight = 0; } console.log('menu loop function click'); }); console.log('menu loop function'); }); // expanding accordion by clicking on a single accordion toggler
1 Respuestas
Responde la pregunta0
No proporcionó un ejemplo de su HTML, pero supongo que su problema es que ha anidado .accordion-toggler . hacer clic en uno de ellos significa que hizo clic en todos sus padres. Esto tiene que ver con las fases de burbujeo y captura de eventos .
Cuando agrega un detector de eventos, puede controlar la fase de captura de este evento. controlado por el tercer argumento addEventListener .
Lo que necesita es usar event.stopPropagation dentro de su oyente. Puedes leer más sobre esto aquí .
Si actualiza su pregunta con un ejemplo de código completo (y DOM), entonces podré actualizar mi respuesta para que sea más precisa para su problema específico.
Otra solución para su situación puede ser adjuntar solo un detector de eventos a la raíz del acordeón y luego responder de acuerdo con el objetivo . Puede leer más acerca de currentTarget que también podría necesitar en su caso si desea que los padres respondan.
Aquí hay un ejemplo de código para eso:
const rootAccordionToggler = document.querySelector('.parentOfAll > .accordion-toggler'); rootAccordionToggler.addEventListener('click', (e) => { const target = e.target; const caret = target.querySelector('.chevron-caret'); // chevron icon caret.classList.toggle('rotate'); if (target.nextElementSibling.style.maxHeight === '' || target.nextElementSibling.style.maxHeight === '0px') { target.nextElementSibling.style.maxHeight = target.nextElementSibling.scrollHeight + 'px'; } else { target.nextElementSibling.style.maxHeight = 0; } });