Блог

Итак, у меня есть компонент accordion, повторно используемый из компонента bootstrap accordion, мне нужно было динамически добавлять их в ответ с сервера. Теперь, если я использую статический html из приведенной выше ссылки, он работает и переключается правильно. Однако, когда я выполняю приведенный ниже код, он не работает:

Раздел Wrraper

  <div class="accordion" id="accordionExample"></div>
 

Часть JS:

Здесь элемент поступает из ответа, полученного из запроса ajax.

 $(".accordion").append(
                `<div class="accordion-item">
                <h2 class="accordion-header" id=${item._id}>
                    <button
                        class="accordion-button"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target=#collapse${item._id}
                        aria-controls=collapse${item._id}
                        aria-expanded="false"
                    >
                        ${item.productName}
                    </button>
                </h2>
                <div
                    id=collapse${item._id}
                    class="accordion-collapse collapse ${
                        index == 0 ? "show" : ""
                    }"
                    aria-labelledby=${item._id}
                    data-bs-parent="#accordionExample"
                >
                    <div class="accordion-body">
                        ${item.description}
                    </div>
                </div>
            </div>`
            );
 

Когда я нажимаю на нерасширенный аккордеон, он расширяется, а остальные закрываются. Однако, когда я пытаюсь закрыть уже развернутый элемент accordion, он мигает (в dom я вижу, что класс меняется с collapsing на collapsed и возвращается обратно.) Расширенное значение aria также сохраняет значение true, поэтому я предполагаю, что оно не разрушается.

Что я должен отредактировать, чтобы заставить его работать.