如何使用Twitter Bootstrap折叠使用javascript动态加载html的工作

Question

我使用javascript调用加载html，此html具有Bootstrap折叠。

<li class="dd-item" data-id="home"> 
<div id="panel1" class="panel panel-default panel-collapsed"> 
    <div class="panel-heading"> 
     <div class="panel-actions"> 
      <a role="button" data-collapse="#panel1" class="btn btn-sm btn-icon"> 
       <i class="icon ion-chevron-down"></i> 
      </a> 
     </div> 
     <h3 class="panel-title">Home</h3> 
    </div> 
    <div class="panel-body" style="display: none;"> 
     <p>some text</p> 
    </div> 
</div> 
</li> 

Answer 1

data-toggle="collapse"和data-target="#id"是你所需要的是能够引导文件将工作，data-toggle="collapse"会告诉系统启动时进行合拢功能，同时data-target="#text"点html标记 将执行切换折叠的id。

在您的代码，替换这条线，

<a role="button" data-collapse="#panel1" class="btn btn-sm btn-icon"> 

与

<a role="button" data-collapse="#panel1" class="btn btn-sm btn-icon" data-toggle="collapse" data-target="#text"> 

其中#text是div ID。在您的

<div class="panel-body" style="display: none;"> 

删除此内嵌CSS样式style="display: none;"并把id属性id="#text"例如。看起来像这样，

<div id="text" class="collapse panel-body"> 

然后你去了。