Bootstrap 3-展開和折疊表格行

Question

我在Bootstrap網頁中有一張table 。 該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

演示版

您必須將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元素動畫的問題-我的建議是不要這樣做。 但是，如果您仍在尋找解決方法，這里有一個演示可能會有所幫助：

演示

Answer 2

這是基於類Demo的工作示例

這將顯示所有匹配的孩子。