Bootstrap 带有 foreach 循环的手风琴

Question

我最初的问题是我的手风琴同时打开，但我知道它来自一直相同的 Id。

所以我尝试让我的 ID 动态化，但这并没有解决我的问题。请问你有解决办法吗？谢谢

这是我的代码：

<div class="accordion mb-5" id="accordion-infos">
  <f:for each="{field.container}" as="container"> 
    <!-- foreach bouton contenu -->
    <div class="card">
      <div class="card-header" id="heading1-{container.buttoncontent}">
        <h2>
          <button class="accordion-button btn btn-link btn-block text-left" 
                  type="button" 
                  data-bs-toggle="collapse" 
                  data-bs-target="#collapseOne-{container.buttoncontent}" 
                  aria-expanded="true" 
                  aria-controls="collapseOne-{container.buttoncontent}">
            {container.buttoncontent}
          </button>
        </h2>
      </div>
      <div id="collapseOne-{container.buttoncontent}" 
           class="accordion-collapse collapse" 
           aria-labelledby="heading1-{container.buttoncontent}" 
           data-bs-parent="#accordion-infos">
        <div class="card-body">
          <div class="section-card">
            <div class="row">
              <div class="col-lg-6 col-md-6">
                <f:format.raw>{container.content}</f:format.raw>
              </div><!-- col-lg-6 col-md-6-->
            </div><!-- row-->
          </div><!-- section card -->
        </div> <!-- card body -->
      </div> <!-- collapsOne -->
    </div> <!-- card  -->
  </f:for><!-- endfor bouton contenu-->
</div><!-- accordion mb-5 -->

Answer 1

使用任何可编辑的文本作为有限制的 ID 通常不是一个好主意。对于手风琴或类似结构，您始终应该使用 TYPO3 中的 uid。或者至少是循环的 iterator.index。

由于一页中可能有多个手风琴，因此您应该将其组合起来。

因此您的 ID 应由容器的 uid 和包含的元素的 uid 组成。
类似于：id="container-{data.uid}-{element.uid}"
或

<f:for each="{field.container}" as="container" iteration="iterator">
  :
     <div class="card-header" id="container-{data.uid}-{iterator.index}"`>
      :
      <div id="collapseOne-{data.uid}-{iterator.index}" ...
        :

Bootstrap 带有 foreach 循环的手风琴

Bootstrap accordion with a foreach loop

javascript

php

twitter-bootstrap

typo3