De hecho, estoy ocurriendo una situación al hacer un acordeón. Ya agregué un botón de cerrar (texto x) dentro de mi div para cerrar el acordeón, pero no se cerrará después de hacer clic en eso. Por cierto, mi diseño de referencia es de https://dribbble.com/shots/6584063-Daily-UI-Accordion-Cards-Experiment . Es sólo el ejemplo del comportamiento. Como en mi referencia, no quiero tener una clase activa la primera vez. Luego, cuando se hace clic en la otra pestaña, la clase activa actual está inactiva y tiene un botón de cierre externo.
document.addEventListener("DOMContentLoaded", (e) => { const accordion = document.querySelectorAll('.a'); const button = document.querySelectorAll('b'); /* add Class from the div itself being clicked */ accordion.forEach((accs, idx) => { accs.addEventListener('click', () => { addActive(accs, idx); }); }); function addActive(el, index) { el.classList.add('active'); accordion.forEach((accs, idx) => { if (idx !== index) { accs.classList.remove("active"); } }); } /* remove class from button */ button.forEach(xer => { xer.addEventListener('click', () => { removeActive(); }); }); function removeActive() { accordion.forEach(accs => { accs.classList.remove('active'); }) } }) .toggle { display: none } .a .b { display: none; } .a.active { color: blue; } .a.active .b { color: rgba(0, 0, 0, 1); display: block; cursor: pointer; } <div id="1" class="a"> Source <div id="button-1" class="b"> x </div> </div> <div id="2" class="a"> Share <div id="button-2" class="b"> x </div> </div> <div id="3" class="a"> Report <div id="button-3" class="b"> x </div> </div>Por favor, ayúdame a arreglar eso. Muchas gracias.
Hubo dos problemas en su fragmento:
const button = document.querySelectorAll('b'); seleccionará todos los elementos <b/> , no los elementos con clase .b ; actualizado a continuación a const button = document.querySelectorAll('.b');.active , el controlador de clics para el acordeón se activaba y lo reabría de inmediato. Agregando un e.stopPropagation(); dentro del controlador impidió que el evento se transmitiera al padre y resolvió el problema.Vea a continuación un ejemplo de trabajo:
document.addEventListener("DOMContentLoaded", (e) => { const accordion = document.querySelectorAll('.a'); const button = document.querySelectorAll('.b'); /* add Class from the div itself being clicked */ accordion.forEach((accs, idx) => { accs.addEventListener('click', () => { addActive(accs, idx); }); }); function addActive(el, index) { el.classList.add('active'); accordion.forEach((accs, idx) => { if (idx !== index) { accs.classList.remove("active"); } }); } /* remove class from button */ button.forEach(xer => { xer.addEventListener('click', (e) => { e.stopPropagation(); removeActive(); }); }); function removeActive() { accordion.forEach(accs => { accs.classList.remove('active'); }) } }) .toggle { display: none } .a .b { display: none; } .a.active { color: blue; } .a.active .b { color: rgba(0, 0, 0, 1); display: block; cursor: pointer; } <div id="1" class="a"> Source <div id="button-1" class="b"> x </div> </div> <div id="2" class="a"> Share <div id="button-2" class="b"> x </div> </div> <div id="3" class="a"> Report <div id="button-3" class="b"> x </div> </div>