在 table 中使用 bootstrap 折叠和 div 时如何避免缓慢折叠

Question

我使用 bootstrap 和 jquery 构建可折叠元素。当在 HTML table 之外使用它们时，它工作正常，但是当我在 table 内部使用它们时，在项目折叠之前有一个明显的短时间，扩展也很好。

有线索吗？示例页面的完整HTML代码如下

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
        <a href="#" data-toggle="collapse" data-target="#querybox">normal collapse</a>
        <div id="querybox" class="collapse">
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
            some long text<br/>
        </div>
        <table>
        <tr>
            <td>
                <a href="#" data-toggle="collapse" data-target="#contentholder1">slow collapse</a>
            </td>
        </tr>
        <tr id="contentholder1" class="collapse">
            <td>234</td>
            <td>
                <div>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                    sometext<br/>
                </div>
            </td>
        </tr>                                                                           
        </table>
  </body>
</html>

Answer 1

尝试对 TR 内的 DIV 进行折叠。 Table 元素具有不同的 display 风格，我认为这是造成效果差异的原因。

示例使用 table https://jsfiddle.net/k2od0ntj/1/

或者，您真的需要 table 来表示您的数据吗？您可以使用 divs 以及 table 元素使用的 display 选项来创建相同的效果并更改 .collapsing 上的 display 样式，即已应用 during transition.

<div class="div-table">       <!-- <table> -->
    <div class="div-tr">      <!--   <tr> -->
        <div class="div-td">  <!--    <td> -->
            <a data-toggle="collapse" data-target="#contentholder1">slow collapse</a>
        </div>
     </div>
     <div id="contentholder1" class="div-tr collapse">
         <div class="div-tr">

没有 table 的示例：https://jsfiddle.net/k2od0ntj/3/

在 table 中使用 bootstrap 折叠和 div 时如何避免缓慢折叠

How to avoid slow collapse when using bootstrap collapse and div in a table

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3