引导折叠整个表

Question

我知道有一种方法可以在引导程序中折叠表格行，例如 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

Answer 2

我可以为此提供两种解决方案，JQuery 和 Bootstrap。

如果您对 JQuery 解决方案持开放态度，请查看此。

---

JQUERY 解决方案

HTML

<div class="collapsable">
   <table>
      <tr><td> word </td><td> another word </td></tr>
      <tr><td> word </td><td> another word </td></tr>
    </table>
</div><br />
<button> Click me </button>

CSS

table, th, td
{
    border: 1px solid black;
}

JQuery

$("button").on("click", function()
{
    $(".collapsable").slideToggle();
});

Fiddle 使用按钮可以上下滑动表格以隐藏/显示。

如果您使用的是 Bootstrap 3.0，那么这个示例怎么样？

---

引导解决方案

HTML

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
      <table>
          <tr><td> word </td><td> another word </td></tr>
          <tr><td> word </td><td> another word </td></tr>
      </table>
  </div>
</div>

CSS

同上。

Boostrap collapse Fiddle

Answer 3

也许是这样的？使用引导手风琴：http://jsfiddle.net/swm53ran/30/

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Table 1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Bob</td>
                    <td>is cool</td>
                    <td>50</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane</td>
                    <td>is cool</td>
                    <td>50</td>
                </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

您可以添加css来使可折叠的面板成为表格本身：

.panel-body {
    padding:0px;
}
.table {
    margin-bottom:0px;
}