WP ACF循环中的Bootstrap手风琴仅打开/关闭第一个面板

时间:2017-10-13 07:19:07

标签: php wordpress loops accordion custom-fields

标题暗示这段代码显示了我添加到循环/手风琴中的所有问题,但无论我点击它哪一个只打开并关闭第一个,我不知道为什么。

<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>

1 个答案:

答案 0 :(得分:0)

我会说你需要看看你的身份

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

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

the_id函数输出当前页面ID而不是每个循环/问题的id

您可以使用计数器

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