【问题标题】:Bootstrap accordion in WordpressWordpress 中的 Bootstrap 手风琴
【发布时间】:2017-12-06 19:45:52
【问题描述】:

我正在尝试让 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 -->

感谢任何帮助,谢谢。

【问题讨论】:

    标签: php wordpress twitter-bootstrap


    【解决方案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 -->
    

    【讨论】:

      【解决方案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 -->
      

      【讨论】:

        【解决方案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 -->
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2017-10-26
          • 1970-01-01
          • 2017-01-21
          • 1970-01-01
          • 1970-01-01
          • 2014-06-14
          • 1970-01-01
          • 2013-01-20
          相关资源
          最近更新 更多