Bootstrap 仅 WP ACF 循环中的手风琴 opening/closing 第一个面板

Question

正如标题所暗示的那样，此代码显示了我添加到 loop/accordion 中的所有问题，但无论我单击哪个问题，它只会打开和关闭第一个问题，我不知道为什么。

<div class="container">
        <div class="row">
            <div id="accordion" role="tablist" aria-multiselectable="false" class="py-4">

              <?php
              $counter = 0;
              $loop = get_field('questions');
              foreach($loop as $row) :   ?>
                    <div class="card card-no-border card-no-shadow">
                        <div class="card-header" role="tab" id="heading<?php echo $counter++ ?>">
                            <h5 class="mb-0">
                                <a class="body2 uppercase bold" data-toggle="collapse" data-parent="#accordion"
                                   href="#collapse<?php the_ID(); ?>"
                                   aria-expanded="<?php echo $first; ?>" aria-controls="collapse<?php the_ID(); ?>">
                                    <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                    <span style='padding-right: 20px;'></span>
                                    <?php echo $row['question_title']?> 

                                </a>
                            </h5>
                        </div>


                        <div id="collapse<?php the_ID(); ?>" class="collapse<?php if ($first) {
                            echo "show";
                            } ?>" role="tabpanel"
                             aria-labelledby="heading<?php the_ID(); ?>">
                            <div class="card-block body2">

                                <?php  echo $row['answer'] ?> 

                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

Answer 1

我会说你需要看看你的 id

href="#collapse<?php the_ID(); ?>"

id="collapse<?php the_ID(); ?>"

the_id 函数输出的是当前页面 id 而不是每个 loop/question

的 id

您可以改用计数器

id="collapse<?php echo $counter; ?>"

Bootstrap 仅 WP ACF 循环中的手风琴 opening/closing 第一个面板

Bootstrap accordion in WP ACF loop only opening/closing first panel

php

wordpress

loops

accordion

custom-fields