手风琴在for循环保持始终打开

Question

我制作了一个带有引导的手风琴，但它处于for循环中，所以当我单击手风琴的一个项目时，所有其他项目都会同时打开。我怎么能只点击打开手风琴的一个项目？

{% for study in studies %}
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs- 
target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    {{ study.uid }}
  </button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria- 
labelledby="headingOne" data-bs-parent="#accordionExample">
  <div class="accordion-body">
text
  </div>
</div>
 </div>

Answer 1

{% for study in studies %}
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="heading{{ study.uid }}">
  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs- 
target="#collapse{{ study.uid }}" aria-expanded="true" aria-controls="collapse{{ study.uid }}">
    {{ study.uid }}
  </button>
</h2>
<div id="collapse{{ study.uid }}" class="accordion-collapse collapse" aria- 
labelledby="heading{{ study.uid }}" data-bs-parent="#accordionExample">
  <div class="accordion-body">
text
  </div>
</div>
 </div>
{% endfor %}

Answer 2

更改id并分配一些动态id，id会重复，因此当您单击一个手风琴时，所有其他手风琴都会打开，这也是因为您为所有手风琴分配了相同的id。