在表格中使用引导折叠和 div 时如何避免缓慢折叠答案

【问题标题】：How to avoid slow collapse when using bootstrap collapse and div in a table在表格中使用引导折叠和 div 时如何避免缓慢折叠
【发布时间】：2015-04-22 06:36:09
【问题描述】：

我使用 bootstrap 和 jquery 来构建可折叠元素。在 HTML 表格之外使用它们时，它可以正常工作，但是当我在表格中使用它时，在项目折叠之前有很短的时间，展开也很好。

看到这个JSFiddle Snippet

有什么线索吗？一个示例页面的完整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>

【问题讨论】：

table的动画和tr、td、th等相关元素存在很多问题。简短的回答是不要为它们制作动画 - 这不是很跨浏览器一致的。如果可以，请为所有动画使用其他元素。
它不能，因为tbody 不接受高度，这就是我们如何为折叠设置动画，因为显示不可动画。

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

尝试在TR 内的DIV 上执行折叠。表格元素具有不同的display 样式，我认为这就是导致效果不同的原因。

使用tablehttps://jsfiddle.net/k2od0ntj/1/的示例

或者，您真的需要一个表格来表示您的数据吗？您可以使用divs 以及表格元素使用的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/

【讨论】：

这基本上可行，但我实际上有多个 td-elements 并且使用 div 我只能折叠其中一个，而不是一次折叠多个，我已经相应地更新了问题和 jsfiddle，但根据对于上面的 cmets，可能无法做到这一点:(
有趣.. 好吧，我为我的答案添加了另一种方法。它似乎在 jsfiddle 中发挥了作用，并且不再包含表格 - 也许试一试？
是的，我可能还是应该切换到 div，但不幸的是，在实际应用程序中这需要做更多的工作。无论如何，感谢您的建议。