Twitter Bootstrapを作成するにはjavascriptを使用して動的に読み込まれたhtmlの作業を折りたたみます。

Question

javascript呼び出しを使用してhtmlをロードしています。このhtmlにはBootstrap Collapseがあります。

<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"は崩壊機能のためのブートストラップを教えてくれますあなたのブートストラップが動作することができるように必要なものであり、一方、トグル崩壊を行いますhtmlタグ のidからdata-target="#text"ポイント。あなたのコードで

、この行を置き換え、

#textが div IDで

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

と

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

。あなたの

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

で、このインラインCSSスタイルstyle="display: none;"を削除して、例えばid属性id="#text"を置きます。このように見える、

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

あなたが行く。