Entonces, a medida que aprendí JS lentamente, revisé mi sitio para mejorar cualquier código anterior.
Una cosa que he estado haciendo últimamente es reemplazar bucles for con forEach y hasta ahora todo bien excepto uno que no puedo entender. Es para un acordeón que cierra uno cuando otro se abre, pero también desplaza el actual a la vista (es para un menú de pie de página móvil).
No puedo resolver el primer bucle for superior, pero es el segundo con el que estoy luchando y ni siquiera estoy seguro de si se puede hacer con forEach:
var acc = document.getElementsByClassName('footer-accordion'); var i; for (i = 0; i < acc.length; i++) { // I can replace this one with forEach no problem acc[i].addEventListener('click', function() { this.classList.toggle('active'); var panel = this.nextElementSibling; if (panel.style.display === 'block') { panel.style.display = 'none'; } else { panel.style.display = 'block'; for (let j = 0; j < acc.length; j++) { // This is the one I am struggling on!! if (this.classList != acc[j].classList) { acc[j].classList.remove('active'); acc[j].nextElementSibling.style.display = 'none'; panel.scrollIntoView({ block: 'end', behavior: 'smooth' }); } } } }); }¿Algo así no te funciona? ¿Puedes compartir tu html para ayudar con las pruebas?
acc.forEach((current)=>{ if (this.classList != current.classList) { current.classList.remove('active'); current.nextElementSibling.style.display = 'none'; panel.scrollIntoView({ block: 'end', behavior: 'smooth' }); } })