html - Bootstrap 折叠整个表格

Question

我知道有一种方法可以在 Bootstrap 中折叠表行，例如 this 。但是我可以有一个按钮/链接/等等吗？我可以单击它，这会折叠整个表格而不仅仅是表格行？

我目前正在根据数据库信息构建表，这些表可能会变得相当大。如果我有 4-5 个表格，我希望用户能够根据他/她的选择折叠/展开这些表格。

这有可能吗？当我谷歌时，我似乎找不到任何答案。

Answer 1

如果您能够将表格放置在 panel 中(例如使用 Bootstrap 3.2)，则无需使用 javascript 即可折叠 panel-body 元素。这是一个例子:

<div class="panel panel-primary accordion"> <!-- Panel (collapasable) -->

    <div class="panel-heading"> <!-- Panel head -->
        <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapseOne">
            Collapse Me On Click!
        </a>           
    </div> <!-- END Panel head -->

    <div id="collapseOne" class="panel-collapse collapse in"> <!-- Collapsable section -->

        <div class="panel-body"> <!-- Panel body -->

            <table>
                <thead>
                    <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                </tbody>

            </table>

        </div> <!-- END Panel body -->

    </div> <!-- END Collapse section -->

</div> 

CSS(并非真正需要):

a {
    color: white;
}

table {
    width: 100%;
}

tr {
   border: solid 1px; 
}

还有一个Fiddle