带有 foreach 循环的 Bootstrap 手风琴

Posted 2023-02-22

【中文标题】带有 foreach 循环的 Bootstrap 手风琴

【英文标题】：Bootstrap accordion with a foreach loop

【发布时间】：2022-01-13 10:38:04

【问题描述】：

我最初的问题是我的手风琴同时打开，但我知道它来自始终相同的 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 -->

【问题讨论】：

“所以我尝试让我的 ID 动态化，但这并没有解决我的问题。” - 为什么/为什么不呢？我们不知道您实际向显示的模板提供了什么数据，那么我们应该如何知道现在实际产生的结果是什么？

“所以我尝试让我的 ID 动态化，但这并没有解决我的问题。”我的意思是当我在我的 id 中添加动态内容时，我的手风琴不再打开，我想在我的 id 中添加我的手风琴按钮的名称

那么生成的 html 源代码是什么样的呢？那里的所有 ID 都设置为您认为应该的？

“我想在我的 id 中添加手风琴按钮的名称” - 这些名称是什么样的？它们实际上是值吗，当以 something- 为前缀时，仍然会为 HTML 中的 ID 生成 有效 值？

当我使用动态 ID 检查 HTML 时，我得到了“ " 所以我得到了正确的值，但我的手风琴不起作用

【参考方案1】：

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

因为你可以在一个页面中有多个手风琴，你应该将它们组合起来。

所以您的 ID 应该由容器的 uid 和所包含元素的 uids 组成。 类似于：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" ...
        :