Bootstrap Accordian活動狀態不起作用，並且所有面板均未折疊

Question

我在手風琴中加載數據時遇到問題。 參考針對我的問題發布的解決方案，我將如何設置默認面板並將其他面板折疊成手風琴。 這是我所做的代碼。

<?php 
        $fistForLoopEnds = false;
        $secondForLoopEnds = false;
        $thirdForLoopEnds = false;
        $fourthForLoopEnds = false;
         ?>
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
       <?php foreach ($this->data2['distinct'] as $key) { ?>

      <div class="panel panel-<?php if ($fistForLoopEnds != true) {
          echo "danger";
          $panelId = "headingOne";
          $accodianId = "collapseOne";
          $accordionExpanded = "true";
      } elseif ($fistForLoopEnds == true && $secondForLoopEnds != true) {
          echo "warning";
          $panelId = "headingTwo";
          $accodianId = "collapseTwo";
          $accordionExpanded = "false\" class=\"collapsed";
      } elseif ($fistForLoopEnds == true && $secondForLoopEnds == true && $thirdForLoopEnds != true) {
          echo "info";
          $panelId = "headingThree";
          $accodianId = "collapseThree";
          $accordionExpanded = "false\" class=\"collapsed";
      } else { echo "success";
          $panelId = "headingFour";
          $accodianId = "collapseFour"; 
          $accordionExpanded = "false\" class=\"collapsed";
          }?>">
        <div class="panel-heading" role="tab" id="<?php echo $panelId; ?>">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#<?php echo $accodianId; ?>" aria-expanded="<?php echo $accordionExpanded; ?>" aria-controls="<?php echo $accodianId; ?>">
              <?php echo $key->sidebar_category; ?>
            </a>
          </h4>
        </div>
        <div id="<?php echo $accodianId; ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="<?php echo $panelId; ?>">
          <div class="panel-body">
        <?php 
            if ($fistForLoopEnds != true) {
                foreach ($this->data2['results_railways'] as $key) { ?>
                    <h5><a href="<?php echo base_url(); ?>home/railways/<?php echo $key->post_id; ?>"><?php echo $key->sidebar_title; ?></a></h5>
                <?php }
                $fistForLoopEnds = true;
                goto a;
            } 
            elseif ($secondForLoopEnds != true) {
                foreach ($this->data2['results_ssc'] as $key) { ?>
                     <h5><a href="<?php echo base_url(); ?>home/ssc/<?php echo $key->post_id; ?>"><?php echo $key->sidebar_title; ?></a></h5>
                 <?php  }
                $secondForLoopEnds = true;
                goto a;
            }
            elseif ($thirdForLoopEnds != true) {
                foreach ($this->data2['results_banks'] as $key) { ?>
                     <h5><a href="<?php echo base_url(); ?>home/banks/<?php echo $key->post_id; ?>"><?php echo $key->sidebar_title; ?></a></h5>
                 <?php  }
                $thirdForLoopEnds = true;
                goto a;
            }
            elseif ($fourthForLoopEnds != true) {
                foreach ($this->data2['results_upsc'] as $key) { ?>
                     <h5><a href="<?php echo base_url(); ?>home/upsc/<?php echo $key->post_id; ?>"><?php echo $key->sidebar_title; ?></a></h5>
                 <?php  }
                $fourthForLoopEnds = true;
                goto a;
            }
            a:
         ?>
          </div>
        </div>
      </div>
       <?php } ?>
      </div>

我需要什么班級來使手風琴處於活動狀態或崩潰？

這是渲染的代碼：

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

          <div class="panel panel-danger">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  Indian Railways                    </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                                        <h5><a href="http://localhost/ssc/home/railways/1"> Introduction and Zones:</a></h5>
                                      </div>
            </div>
          </div>

          <div class="panel panel-warning">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" class="collapsed" aria-controls="collapseTwo">
                  Staff Selection Commission                    </a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                                         <h5><a href="http://localhost/ssc/home/ssc/8">SSC Combined Graduate Level Exam pattern</a></h5>

                                       </div>
            </div>
          </div>

          <div class="panel panel-info">
            <div class="panel-heading" role="tab" id="headingThree">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" class="collapsed" aria-controls="collapseThree">
                  Bank Exams                    </a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
              <div class="panel-body">
                                         <h5><a href="http://localhost/ssc/home/banks/16">Syllabus for Bank Clerical: English</a></h5>

                                       </div>
            </div>
          </div>

          <div class="panel panel-success">
            <div class="panel-heading" role="tab" id="headingFour">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" class="collapsed" aria-controls="collapseFour">
                  MPSC & UPSC                    </a>
              </h4>
            </div>
            <div id="collapseFour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFour">
              <div class="panel-body">
                                         <h5><a href="http://localhost/ssc/home/upsc/24">What is IAS?</a></h5>

                                       </div>
            </div>
          </div>
                         </div>

Answer 1

您需要刪除in從類id="<?php echo $accodianId; ?>"根據您的工作狀態，而這個類應該只為一個活躍的EGS你要打開的內容時，可以添加$fistForLoopEnds == true那么您需要類似的代碼，

  <div class="panel panel-<?php if ($fistForLoopEnds != true) {
              echo "danger";
              $panelId = "headingOne";
              $accodianId = "collapseOne";
              $accordionExpanded = "true";
              $in = "in";
          } elseif ($fistForLoopEnds == true && $secondForLoopEnds != true) {
              echo "warning";
              $panelId = "headingTwo";
              $accodianId = "collapseTwo";
              $accordionExpanded = "false\" class=\"collapsed";
              $in = "";
          } elseif ($fistForLoopEnds == true && $secondForLoopEnds == true && $thirdForLoopEnds != true) {
              echo "info";
              $panelId = "headingThree";
              $accodianId = "collapseThree";
              $accordionExpanded = "false\" class=\"collapsed";
              $in = "";
          } else { echo "success";
              $panelId = "headingFour";
              $accodianId = "collapseFour"; 
              $accordionExpanded = "false\" class=\"collapsed";
              $in = "";
              }?>">
<div id="<?php echo $accodianId; ?>" class="panel-collapse collapse <?php echo $in; ?>" role="tabpanel" aria-labelledby="<?php echo $panelId; ?>">