• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

333
Views
Boostrap 5 Acordeón no colapsa

Estoy usando el acordeón Bootstrap en mi aplicación stenciljs de la siguiente manera:

 <div class="ba-accordion"> <div class="accordion-item"> <div class="accordion-header" id="kpf-accordion-nachrichtenverlauf-heading"> <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={()=>{this._nachrichtenVerlaufPanelClickHandler()}} > <p class="kpf-nachrichtenverlauf">Message History</p> </button> </div> <div id="kpf-accordion-nachrichtenverlauf-panel" class="accordion-collapse collapse" aria-labelledby="kpf-accordion-nachrichtenverlauf-heading" > <div class="accordion-body"> </div> </div> </div> </div>

Funciona correctamente cuando pruebo localmente con npm start, pero cuando ejecuto la aplicación en el servidor nginx, se abre una vez y no se cierra. Al analizar los elementos en el navegador, veo que el elemento del panel div con id = "kpf-accordion-nachrichtenverlauf-panel" siempre tiene el show de clase y si lo elimino directamente en el navegador, se cierra, pero si lo hago programáticamente, no pasa nada. y el acordeón permanece abierto. El siguiente es el código del controlador de clics de 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'); } }

El comportamiento es el mismo en Edge y Chrome. ¿Cómo puedo arreglar esto?

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error