引導3 - 展開和摺疊錶行

Question

我有一個table與Bootstrap的網頁。這table有我想展開/摺疊的行。它旨在表現爲層次結構。您可以在Bootply中看到table。您可以看到它成功擴展/摺疊了「祖父母」內容。但是，它不會根據需要展開/摺疊每個「父」元素的內容。

如何展開/摺疊此table中的子行？這是我的HTML：

<div class="list-group-item" id="grandparent"> 
    <div id="expander" data-target="#grandparentContent" data-toggle="collapse" data-group-id="grandparent" data-role="expander"> 
     <ul class="list-inline"> 
      <li id="grandparentIcon">&gt;</li> 
      <li>Grandparent</li> 
     </ul> 
    </div> 

    <div class="collapse" id="grandparentContent" aria-expanded="true"> 
     <table class="table"> 
     <thead> 
      <tr> 
      <th></th> 
      <th>Name</th> 
      <th>Created On</th> 
      <th>Last Modified</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr data-toggle="collapse"> 
      <td><div>&gt;</div></td> 
      <td>Parent 1</td> 
      <td>04/02/2017</td> 
      <td>04/04/2017</td> 
      </tr> 

      <tr class="collapse"> 
      <td></td> 
      <td>Child A</td> 
      <td>04/01/2017</td> 
      <td>04/05/2017</td> 
      </tr> 

      <tr class="collapse"> 
      <td></td> 
      <td>Child B</td> 
      <td>04/03/2017</td> 
      <td>04/04/2017</td> 
      </tr>   

      <tr data-toggle="collapse"> 
      <td><div>&gt;</div></td> 
      <td>Parent 2</td> 
      <td>04/03/2017</td> 
      <td>04/10/2017</td> 
      </tr> 

      <tr class="collapse"> 
      <td></td> 
      <td>Child X</td> 
      <td>04/10/2017</td> 
      <td>04/11/2017</td> 
      </tr>   
     </tbody> 
     </table> 
    </div> 
</div> 

Answer 1

Demo

您必須data-target="#collapseContent1" data-toggle="collapse"屬性添加到父1和家長2就像你做它祖父母。

然後給id作爲目標。

<div class="list-group-item" id="grandparent"> 
    <div id="expander" data-target="#grandparentContent" data-toggle="collapse" data-group-id="grandparent" data-role="expander"> 
     <ul class="list-inline"> 
      <li id="grandparentIcon">&gt;</li> 
      <li>Grandparent</li> 
     </ul> 
    </div> 

    <div class="collapse" id="grandparentContent" aria-expanded="true"> 
     <table class="table"> 
     <thead> 
      <tr> 
      <th></th> 
      <th>Name</th> 
      <th>Created On</th> 
      <th>Last Modified</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr > 
      <td data-target="#collapseContent1" data-toggle="collapse" data-group-id="grandparent" data-role="expander"><div>&gt;</div></td> 
      <td>Parent 1</td> 
      <td>04/02/2017</td> 
      <td>04/04/2017</td> 
      </tr> 

      <tr class="collapse" id="collapseContent1" aria-expanded="true"> 
      <td></td> 
      <td>Child A</td> 
      <td>04/01/2017</td> 
      <td>04/05/2017</td> 
      </tr>    

      <tr> 
      <td data-target="#collapseContent2" data-toggle="collapse" data-group-id="grandparent" data-role="expander"><div>&gt;</div></td> 
      <td>Parent 2</td> 
      <td>04/03/2017</td> 
      <td>04/10/2017</td> 
      </tr> 

      <tr class="collapse" id="collapseContent2" aria-expanded="true"> 
      <td></td> 
      <td>Child B</td> 
      <td>04/03/2017</td> 
      <td>04/04/2017</td> 
      </tr>   
     </tbody> 
     </table> 
    </div> 
</div> 

但是你不會得到tr元素的動畫。

這似乎是一個長期存在的問題與動畫tr元素 - 我的建議是不這樣做。但是，如果你還在尋找這裏的解決方法是一個演示，這可能有助於：

DEMO

Answer 2

基於類 Demo

這將顯示所有匹配的孩子的在這裏工作的例子。