Question

我只想激活第一个引导面板，但是当它加载时折叠/激活所有面板。这是我的代码：

<?php                                                            
     $the_query = new WP_Query( array(
     'posts_per_page'=>-1,
     'post_type' => 'news-and-events',
     'order'   => 'ASC',
     'category_name'     => 'news-events',
     'paged' => get_query_var('paged') ? get_query_var('paged') : 1) ); 
?>  

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

<?php 
     $i = 1;
     while ($the_query -> have_posts()) : $the_query -> the_post(); 
 ?>

<div class="panel panel-default">
  <div class="panel-heading silva-news-panel" role="tab" id="headingOne">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapseOne">
        <?php the_title(); ?>
      </a>
    </h4>
  </div>
<div id="collapse-<?php echo $i;?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body nws-body">
    <h3><i class="fa fa-newspaper-o" aria-hidden="true"></i> <?php echo get_the_date(); ?></h3>
    <div class="nws-body-img">
      <?php the_post_thumbnail();?>
    </div>
    <?php the_field('news_description'); ?>
</div>
</div>
    </div>
  <?php
         $i++;
         endwhile;
  ?>

此处的类panel-collapse collapse in in已折叠。当我在活动所有面板中加载页面时。我只想折叠第一个面板。其他将处于非活动状态。

Answer 1

简短说明：

打印类时，如果$ i值为1，则需要添加条件，然后打印in类。否则所有div都没有类别。

<?php get_header(); ?>

<?php                                                            
     $the_query = new WP_Query( array(
     'posts_per_page'=>-1,
     'post_type' => 'news-and-events',
     'order'   => 'ASC',
     'category_name'     => 'news-events',
     'paged' => get_query_var('paged') ? get_query_var('paged') : 1) ); 
?> 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<?php 
     $i = 1;
     while ($the_query -> have_posts()) : $the_query -> the_post(); 
 ?>

<div class="panel panel-default">
  <div class="panel-heading silva-news-panel" role="tab" id="headingOne">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapseOne">
        <?php the_title(); ?>
      </a>
    </h4>
  </div>
<div id="collapse-<?php echo $i;?>" class="panel-collapse collapse <?php if($i == 1) echo "in"; ?>" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body nws-body">
    <h3><i class="fa fa-newspaper-o" aria-hidden="true"></i> <?php echo get_the_date(); ?></h3>
    <div class="nws-body-img">
      <?php the_post_thumbnail();?>
    </div>
    <?php the_field('news_description'); ?>
</div>
</div>
    </div>
  <?php
         $i++;
         endwhile;
  ?>

如何仅折叠第一个引导面板？

1 个答案: