Bootstrap 3摺疊 - 使摺疊只有一個面板

Question

我需要摺疊面板允許一次只摺疊一個面板。但是我的崩潰允許當時打開多個小組。

我不知道我在做什麼錯。 這裏是我的代碼：

<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12"> 
<div class="panel-group" id="h-promocje" role="tablist" aria-multiselectable="true" style=""> 
<?php foreach ($promocje as $key => $promocja) { ?> 
    <div class="panel-default"> 
     <a class="accordion-toggle collapsed" role="button" style="text-decoration:none !important;" data-toggle="collapse" data-parent="#h-promocje" href="#promocja<?=$key?>" aria-expanded="true" aria-controls="promocja<?=$key?>"> 
      <div class="panel-heading" role="tab" id="h-promocja<?=$key?>" style="border-bottom: 1px solid white;padding-left: 0;padding-right: 0;"> 
       <h4 class="panel-title" style="color:white;font-size:18px;font-weight:bold;text-transform: uppercase;padding-top: 4px; padding-bottom: 3px;text-align: left;"> 
        <?=$promocja->tytul?> 
       </h4> 
      </div> 
     </a> 
     <div id="promocja<?=$key?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="promocja<?=$key?>"> 
      <div class="panel-body"> 
       <?=$promocja->opis?> 
      </div> 
     </div> 
    </div> 
<?php } ?> 
</div> 

Answer 1

您使用的引導

。並且Bootstrap的崩潰需要在可摺疊結構中聲明.panel類，並且在結構中使用data-parent=""屬性，否則它不能用作手風琴。 您尚未添加面板類，請將其添加到面板默認類中。

.container-full { 
 
    width: 90%!important; 
 
    /* for demo */ 
 
    margin: 0 auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container-full"> 
 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="panel panel-default"> 
 
     <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"> 
 
      Collapsible Group Item #1 
 
     </a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="panel-body"> 
 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird 
 
      on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, 
 
      raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading" role="tab" id="headingTwo"> 
 
     <h4 class="panel-title"> 
 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      Collapsible Group Item #2 
 
     </a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
     <div class="panel-body"> 
 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird 
 
      on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, 
 
      raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading" role="tab" id="headingThree"> 
 
     <h4 class="panel-title"> 
 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
 
      Collapsible Group Item #3 
 
     </a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
     <div class="panel-body"> 
 
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird 
 
      on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, 
 
      raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

下面是從引導的網站上的活生生的例子。嘗試刪除面板類。