Bootstrap可摺疊面板 - 從部分開始打開

我正在使用Boostrap手風琴/可摺疊面板的此標記。我如何讓所有部分在頁面加載時打開而不是摺疊？Bootstrap可摺疊面板 - 從部分開始打開

<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 class="collapsed accordion-toggle" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Header </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       collapsible stuff 
      </div> 
     </div> 
    </div> 
</div>

來源

2017-02-16 noclist

的[Twitter的引導崩潰上負載的第一項與第二開放項目]可能的複製（http://stackoverflow.com/questions/15771265/twitter -bootstrap-collapse-first-item-open-second-item-on-load） – isherwood

不是，我希望我的所有部分都可以打開。不只是第一個。 – noclist

是的，但同樣的技術適用。 – isherwood

你只需要類名in添加到div.collapse元素。

<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 class="collapsed accordion-toggle" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Header </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       collapsible stuff 
      </div> 
     </div> 
    </div> 
</div>

http://www.bootply.com/Gld6UPkkuL

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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 class="collapsed accordion-toggle" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Header </a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
       <div class="panel-body"> 
 
        collapsible stuff 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

來源

2017-02-16 21:15:28

謝謝！我注意到除了我展開的部分之外，所有部分都會自動關閉。任何方式來防止呢？ – noclist

如果不這樣做，那不是手風琴。您可能只想使用簡單的jQuery slideToggle。 – isherwood

Bootstrap可摺疊面板 - 從部分開始打開

回答

相關問題