Fatal编程技术网
  • javascript/
  • Javascript 在表中使用引导折叠和div时如何避免缓慢折叠

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

javascript jquery twitter-bootstrap twitter-bootstrap-3

Javascript 在表中使用引导折叠和div时如何避免缓慢折叠,javascript,jquery,twitter-bootstrap,twitter-bootstrap-3,Javascript,Jquery,Twitter Bootstrap,Twitter Bootstrap 3,我使用bootstrap和jquery构建可折叠元素。当在HTML表外使用它们时，效果很好，但是当我在表内使用它时，有一段明显的短时间，直到项目崩溃，扩展也很好 看到这个了吗 有线索吗？示例页面的完整HTML代码如下所示 <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

我使用bootstrap和jquery构建可折叠元素。当在HTML表外使用它们时，效果很好，但是当我在表内使用它时，有一段明显的短时间，直到项目崩溃，扩展也很好

看到这个了吗

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


一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

234
sometext

sometext

sometext

sometext

sometext

sometext

sometext

sometext

sometext

sometext

sometext

sometext

sometext
尝试在
TR
中的
DIV
上执行折叠。表元素具有不同的
显示
样式，我认为这就是造成效果差异的原因

使用
表格的示例

或者，您真的需要一个表来表示您的数据吗？您可以使用
div
s以及表元素使用的
display
选项来创建相同的效果，并更改所应用的
上的
display
样式




关于
表格
的动画和相关元素，例如
tr
、
td
和
th
，存在很多问题。这里的简单答案是，不要设置动画-跨浏览器的一致性不是很高。如果可以，请对所有动画使用其他元素。它不能作为
tbody
不接受高度，这就是我们制作折叠动画的方式，因为显示不可设置动画。这基本上是可行的，但我实际上有多个td元素，使用div只能折叠其中一个，不能一次折叠多个，我已经相应地更新了问题和JSFIDLE，但根据上面的评论，可能无法做到这一点：（有趣..好吧，我已经在我的答案中添加了一种替代方法。它似乎在JSFIDLE中实现了这一点，并且不再包括表-也许可以尝试一下？是的，无论如何我应该切换到div，但不幸的是，在实际应用中这需要做更多的工作。无论如何，感谢您的建议。

<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">