Laravel Bootstrap Accordion 无法正常工作？

Question

在我的手风琴中，我展示了父项。 我通过使用getItems()方法得到的。 它被链接到每个项目。 每个父项都有一些子项。 我正在使用($item->children as $child)当单击任何父项时，该父项的子项应该从下拉列表中可见。

问题是每当我单击任何父项时，每个子项都会显示在下拉列表中。 但我只想显示父项的子项。 如果有人可以帮助我，那就太好了。 提前致谢。

这是我的刀片文件代码。

<div class="container my-4">
        <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
          <div class="card">
            <div class="card-header" role="tab" id="headingTwo2">
              @foreach(getItems() as $item)
                <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
                  aria-expanded="false" aria-controls="collapseTwo2">
                  <h5 class="mb-0">
                    {{ $item->name }} <i class="fas fa-angle-down rotate-icon"></i>
                  </h5>
                </a>
                <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
                  data-parent="#accordionEx">
                  <div class="card-body">
                     @foreach ($item->children as $child)
                      <a href="{{ route('category.island.list') }}?category={{ $child->id }}"
                      class="dropdown-item" data-id="{{ $child->id }}" data-name="{{ $child->name }}">
                      <span>{{ $child->name }}</span>
                      </a>
                @endforeach
                  </div>
                </div>
              @endforeach
            </div>

          </div>
          
        </div>
      </div>

Answer 1

这是正常的，因为它们在这里都有相同的 href：

<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
                  aria-expanded="false" aria-controls="collapseTwo2">

他们都在这个 div 中引用了相同的“id”：

<div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
                 data-parent="#accordionEx">

因此，只需在您的 foreach 中添加一个变量作为“计数”，这将增加 foreach 循环，您只需将其添加到您的 href 和 Id 中 twig 就可以了:)

Twig 方式：第一个 foreach：TWIG： {% set count = 0 %} PHP： <?php $count = 0; ?> <?php $count = 0; ?>在最后的第一个 foreach 中：TWIG: {% set count = count + 1 %} PHP: <?php $a++; ?> <?php $a++; ?>如下：

    <div class="container my-4">
            <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
              <div class="card">
                <div class="card-header" role="tab" id="headingTwo2">
<?php $count = 0; ?>
                  @foreach(getItems() as $item)
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2{{ $count }}"
                      aria-expanded="false" aria-controls="collapseTwo2{{ $count }}">
                      <h5 class="mb-0">
                        {{ $item->name }} <i class="fas fa-angle-down rotate-icon"></i>
                      </h5>
                    </a>
                    <div id="collapseTwo2{{ $count }}" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
                      data-parent="#accordionEx">
                      <div class="card-body">
                         @foreach ($item->children as $child)
                          <a href="{{ route('category.island.list') }}?category={{ $child->id }}"
                          class="dropdown-item" data-id="{{ $child->id }}" data-name="{{ $child->name }}">
                          <span>{{ $child->name }}</span>
                          </a>
                    @endforeach
                      </div>
                    </div>
<?php $count++; ?> 
                  @endforeach
                </div>
    
              </div>
              
            </div>
          </div>