在表中使用引導崩潰和div時如何避免緩慢崩潰

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

嘗試對TR內部的DIV執行折疊操作。 表格元素具有不同的display樣式，我認為這是造成效果差異的原因。

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

另外，您是否真的需要一個表來代表您的數據？ 您可以使用div以及表元素使用的display選項來創建相同的效果並更改.collapsing上在過渡期間應用的display樣式。

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

在表中使用引導崩潰和div時如何避免緩慢崩潰

問題描述

1 個解決方案

解決方案1
6 已采納 2015-04-22 09:22:47

在表中使用引導崩潰和div時如何避免緩慢崩潰

問題描述

1 個解決方案

解決方案1 6 已采納 2015-04-22 09:22:47

解決方案1
6 已采納 2015-04-22 09:22:47