Wordpress 中的 Bootstrap 手风琴

Question

我正在尝试让 Bootstrap 的手风琴在 Wordpress 中工作，但我不确定我还需要在循环中添加什么。目前，无论我单击哪个面板，它都只会扩展第一个面板，并且不显示任何内容。

       <div class="panel-group" id="accordian" role="tablist" aria-multiselectable="true">

            <?php 
                $args = array(
                    'post_type'         => 'faq_question',
                    'category_name'     => 'order',
                    'posts_per_page'    => -1
                );  
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post();
            ?>

            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="<?php the_ID(); ?>">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><?php the_title();?></a>
                    </h4>
                </div><!-- end panel heading -->
                <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="<?php the_ID(); ?>">
                    <div class="panel-body">
                        <p><?php the_content(); ?></p>
                    </div><!-- end panel body -->
                </div><!-- end panel collapse -->
            </div><!-- end panel default -->
            <?php endwhile; wp_reset_query(); ?>
        </div><!-- end panel group -->

感谢任何帮助，谢谢。

Answer 1

区域封闭的 Bootstrap 4 代码

<!-- Accordion Collapse Bootstrap 4 -->
            <div id="accordion" role="tablist" aria-multiselectable="true">
                <?php 
                    $args = array(
                        'post_type' => 'question',
                        'posts_per_page' => -1
                    );  
                    $loop = new WP_Query( $args );
                    while ( $loop->have_posts() ) : $loop->the_post();
                ?>
                <div class="card">
                    <div class="card-header" role="tab" id="<?php the_ID(); ?>">
                      <h5 class="mb-0">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php the_ID(); ?>" aria-expanded="false" aria-controls="collapseOne">
                          <?php the_Title(); ?>
                        </a>
                      </h5>
                    </div>
                     <div id="collapse<?php the_ID(); ?>" class="collapse" role="tabpanel" aria-labelledby="heading<?php the_ID(); ?>">
                      <div class="card-block">
                        <?php the_Content(); ?>
                      </div>
                    </div>
                        <?php endwhile; wp_reset_query(); ?>
                </div>
            </div>

            <!-- Accordion Collapse Bootstrap 4 -->

Answer 2

我怀疑这是因为您最终得到了多个具有相同 ID 的 div，#collapse1，所以Bootstrap 不知道您要折叠哪个。尝试更改您的代码，使每个可折叠面板都有一个唯一的 ID，如下所示； （我已经去掉了一些额外的属性，所以我可以更容易地看到发生了什么）

<div class="panel-group" id="accordian">
<?php 
    $args = array(
        'post_type' => 'faq_question',
        'category_name' => 'order',
        'posts_per_page' => -1
    );  
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
?>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordian" href="#collapse<?php the_ID(); ?>" ><?php the_Title(); ?></a>
            </h4>
        </div><!-- end panel heading -->
        <div id="collapse<?php the_ID ?>" class="panel-collapse collapse">
            <div class="panel-body">
                <p><?php the_Content(); ?></p>
            </div><!-- end panel body -->
        </div><!-- end panel collapse -->
    </div><!-- end panel default -->
<?php endwhile; wp_reset_query(); ?>
</div><!-- end panel group -->

Answer 3

        <?php 
            $args = array(
                'post_type' => 'Help',

                'posts_per_page'    => -1
            );  
            $loop = new WP_Query( $args );
            while ( $loop->have_posts() ) : $loop->the_post();
        ?>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="<?php the_ID(); ?>">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordian" href="#collapse<?php the_ID(); ?>" aria-expanded="false" aria-controls="collapseOne"><?php the_title();?></a>
                </h4>
            </div><!-- end panel heading -->
            <div id="collapse<?php the_ID(); ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="<?php the_ID(); ?>">
                <div class="panel-body">
                    <p><?php the_content(); ?></p>
                </div><!-- end panel body -->
            </div><!-- end panel collapse -->
        </div><!-- end panel default -->
        <?php endwhile; wp_reset_query(); ?>
    </div><!-- end panel group -->