Question

我使用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>

Answer 1

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

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

的示例

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

<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的示例：during transition

如何在表中使用bootstrap collapse和div时避免缓慢崩溃

1 个答案: