Boostrap崩溃

Question

我试图使用bootstraps collapse方法隐藏表的一部分。

除了将display:block应用于表格之外，它可以正常工作，这会使表格在切换后以不正确的方式显示。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a href='#' class='btn btn-default' data-toggle='collapse' data-target='#hiddenFooter'>Toggle</a>

<table class='table table-condensed table-hover'>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>Today</td>
      <td>Is</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Good</td>
      <td>Day</td>
      <td>Hello</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
  </tbody>
  <tfoot id='hiddenFooter' class='collapse'>
    <tr>
      <td>Footer</td>
      <td>Fotir</td>
      <td>Finner</td>
    </tr>
    <tr>
      <td>Footer</td>
      <td>Fitter</td>
      <td>Fatter</td>
    </tr>
  </tfoot>
</table>

＆＃13;

＆＃13;

即使我切换整个表（而不是tfoot），结果也是一样的。必须有一种方法可以在bootstrap中执行此操作而无需编写自己的jQuery代码。

Answer 1

正如Archana所说，使用.collapse.in {display: table-footer-group}，但要确保不改变正常.collapse.in除了tfoot，然后使用table tfoot.collapse.in {display: table-footer-group;}或`table＃ hiddenFooter.collapse.in {display：table-footer-group;}

以下示例

＆＃13;

＆＃13;

table #hiddenFooter.collapse.in {display: table-footer-group;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href='#' class='btn btn-default' data-toggle='collapse' data-target='#hiddenFooter'>Toggle</a>

<table class='table table-condensed table-hover'>
<tbody>
  <tr>
    <td>Hello</td>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
  <tr>
    <td>Today</td>
    <td>Is</td>
    <td>A</td>
  </tr>
  <tr>
    <td>Good</td>
    <td>Day</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</tbody>
<tfoot id='hiddenFooter' class='collapse'>
  <tr>
    <td>Footer</td>
    <td>Fotir</td>
    <td>Finner</td>
  </tr>
  <tr>
    <td>Footer</td>
    <td>Fitter</td>
    <td>Fatter</td>
  </tr>
</tfoot>
</table>

＆＃13;

＆＃13;

＆＃13;

`