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可折叠面板 - 从部分开始打开

回答

相关问题