Блог

Я использую загрузочный аккордеон в своем приложении stenciljs следующим образом:

 lt;div class="ba-accordion"gt;  lt;div class="accordion-item"gt;  lt;div class="accordion-header" id="kpf-accordion-nachrichtenverlauf-heading"gt;  lt;button class="accordion-button" id="accordion-button"  type="button"  data-bs-toggle="collapse"  data-bs-target="#kpf-accordion-nachrichtenverlauf-panel"  aria-expanded="false"  aria-controls="kpf-accordion-nachrichtenverlauf-panel" onClick={()=gt;{this._nachrichtenVerlaufPanelClickHandler()}}  gt;  lt;p class="kpf-nachrichtenverlauf"gt;Message Historylt;/pgt;  lt;/buttongt;  lt;/divgt;  lt;div id="kpf-accordion-nachrichtenverlauf-panel"  class="accordion-collapse collapse"  aria-labelledby="kpf-accordion-nachrichtenverlauf-heading"  gt;  lt;div class="accordion-body"gt;    lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  

Он работает правильно, когда я тестирую локально с помощью npm start, но когда я запускаю приложение на сервере nginx, оно открывается один раз и не закрывается. Анализируя элементы в браузере, я вижу, что в элементе панели div с идентификатором=»kpf-аккордеон-начрихтенверлауф-панель» всегда отображается класс, и если напрямую удалить его в браузере, он закроется, но если я сделаю это последовательно, ничего не произойдет, и аккордеон останется открытым. Ниже приведен код обработчика щелчков Javascript:

 private _nachrichtenVerlaufPanelClickHandler() {   var nachrichtenVerlaufHeading = document.getElementById('accordion-button');  var panel = document.getElementById('kpf-accordion-nachrichtenverlauf-panel')     if(nachrichtenVerlaufHeading.getAttribute('aria-expanded') === "true") {  console.log("INSIDE THE IF");  panel.classList.remove('show');  } }  

Такое же поведение наблюдается в Edge и Chrome. Как я могу это исправить?