使用带有Wordpress ACF中继器字段的 Bootstrap 折叠

xt0899hw  于 2023-03-01  发布在  WordPress
关注(0)|答案(1)|浏览(171)

我使用的是带ACF的Bootstrap accordion ,并且在repeater部分有一个repeater。我得到了所有的数据,并且显示了它应该显示的样子,但是当我点击标题打开主体的时候,类变成了“collapse show”, accordion 打开了几分之一秒,然后马上又关闭了。有人有什么想法吗?下面是代码:

<div id="accordion">
                <div class="card">
                <?php 
                if( have_rows('instructions_android')):
                    $i = 1;

                    while ( have_rows('instructions_android')) : the_row();

                ?>
                    <div class="card-header" id="heading<?php echo $i; ?>">
                        <h5 class="mb-0">
                            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse<?php echo $i; ?>" aria-expanded="false" aria-controls="collapse<?php echo $i; ?>">
                            <span class="instr-title"><?php echo get_sub_field('etape_installation_no'); ?> : </span><span class="instr-title"><?php echo get_sub_field('titre_du_step'); ?></span>
                            </button>
                        </h5>
                    </div>

                    <div id="collapse<?php echo $i; ?>" class="collapse" aria-labelledby="heading<?php echo $i; ?>" data-parent="#accordion">
                    <?php
                $i++;?>
                    <div class="card-body">
                            <ul>
                                    <?php 
                                    $j = 1;
                                    if( have_rows('descr_step')):

                                        while ( have_rows('descr_step')) : the_row();
                                        ?>
                                        <li><?php echo get_sub_field('description'); ?></li>
                                    <?php 
                                            $j++;
                                        endwhile; ?>
                            </ul>
            <?php endif; ?>      
                        </div><!--card body-->
                    </div>
                </div><!--card-->

           <?php endwhile;
            endif;?>
            </div>
ocebsuys

ocebsuys1#

<div class="accordion-list">
          <ul>
            <?php
            $faq_section = get_field('faq_section');
            foreach($faq_section['question_and_answer'] as $key => $qas){ ?>
              <li>
                    <a data-bs-toggle="collapse" class="collapse" data-bs-target="#accordion-list-1<?php echo $key; ?>"> <?php echo $qas['question']; ?> <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                    
                    <div id="accordion-list-1<?php echo $key; ?>" class="collapse <?php if($key == 0 ){ echo "show"; } ?>" data-bs-parent=".accordion-list">
                      <p> <?php echo $qas['answer']; ?> </p>
                    </div>
                  </li>
            <?php
            }
              ?>

            <!-- <li>
              <a data-bs-toggle="collapse" data-bs-target="#accordion-list-2" class="collapsed"><span>02</span> Feugiat scelerisque varius morbi enim nunc? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="accordion-list-2" class="collapse" data-bs-parent=".accordion-list">
                <p>
                  Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui.
                </p>
              </div>
            </li>

            <li>
              <a data-bs-toggle="collapse" data-bs-target="#accordion-list-3" class="collapsed"><span>03</span> Dolor sit amet consectetur adipiscing elit? <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
              <div id="accordion-list-3" class="collapse" data-bs-parent=".accordion-list">
                <p>
                  Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus. Urna molestie at elementum eu facilisis sed odio morbi quis
                </p>
              </div>
            </li> -->

          </ul>
        </div>

相关问题