Quiero crear un acordeón en el cajón del carrito de mi tienda web, pero no puedo encontrar una manera de solucionar mi problema.
Lo que sucede aquí es que obtengo el elemento, pero tan pronto como se vuelve a renderizar el cajón, se pierde mi referencia. Debido a que el DOM cambia dinámicamente, no debería hacerlo de esta manera. En su lugar, debería usar la delegación de eventos para que mi código aún pueda funcionar incluso cuando las cosas se vuelven a renderizar.
var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { 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"; } }); } <button type="button" class="accordion">Expand me</button> <div class="panel"> <p>Text here...</p> </div>Tenga un elemento contenedor de acordeón al que adjunte al oyente. Luego también almacene en caché los divs dentro de cada panel div. Use clases para especificar si la información de cada panel debe ser visible. Inicialmente, los configuramos todos para display: none .
const accordion = document.querySelector('.accordion'); const add = document.querySelector('.add'); accordion.addEventListener('click', handleClick, false); add.addEventListener('click', handleAdd, false); function handleAdd() { const html = '<div class="panel"><button>Expand me: newPanel</button><div><p>New Panel</p></div></div>'; accordion.insertAdjacentHTML('beforeend', html); } function handleClick(e) { const button = e.target; // Check to see if the element we clicked on was // the button if (button.nodeName === 'BUTTON') { // Find the closest panel ancestor const parent = button.closest('.panel'); // Get all of the panels, even the ones newly added const panels = accordion.querySelectorAll('.panel div'); // Remove all the `show` classes from the panels panels.forEach(panel => panel.classList.remove('show')); // And add `show` to the panels `div` which we previous hid parent.querySelector('div').classList.add('show'); } } .panel div { display: none; } .panel div.show { display: block; } .add { margin-top: 1em; background-color: #44aa77; } <div class="accordion"> <div class="panel"> <button>Expand me: one</button> <div><p>One</p></div> </div> <div class="panel"> <button>Expand me: two</button> <div><p>Two</p></div> </div> <div class="panel"> <button>Expand me: three</button> <div><p>Three</p></div> </div> </div> <button class="add">Add new panel</button>