Bootstrap手風琴表平滑開合

Question

我想創建一個Bootstrap手風琴表。當單擊該行時，它將打開子行。他們打開很好，但問題是不平穩。我嘗試了幾乎所有的東西，但都沒有成功。

<table class="table table-hover"> 
<thead> 


<tr> 
    <th> 
    <label class="inputcheck inputcheck-lg"> 
    <input type="checkbox" id="checkall"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <th>Business Name</th> 
    <th>Category</th> 
    <th>Sub Category</th> 
    <th>Free Leads</th> 
    <th>Paid Leads</th> 
    <th>Campaign</th> 
    <th>Status</th> 
</tr> 
</thead> 



<tbody> 

    <tr data-toggle="collapse" data-target=".subrow1"> 
    <td> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </td> 
    <td> <span class="chevron_toggleable glyphicon glyphicon-plus"></span> New Vision Electric</td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr class="collapse subrows subrow1 uk-animation-2"> 
    <td> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </td> 
    <td> </td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr class="collapse subrows subrow1 uk-animation-3"> 
    <td> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </td> 
    <td></td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr class="collapse subrows subrow1 uk-animation-4"> 
    <td> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </td> 
    <td></td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr data-toggle="collapse" data-target=".subrow2"> 
    <th scope="row"> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <td> <span class="chevron_toggleable glyphicon glyphicon-plus"></span> New Vision Electric</td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr class="collapse fade subrows subrow2"> 
    <th scope="row"> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <td>New Sub Row 3 </td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr class="collapse fade subrows subrow2"> 
    <th scope="row"> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <td>New Sub Row 3 </td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr> 
    <th scope="row"> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <td>New Vision Electric</td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>Not Assigned</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox"> 
    </td> 
    </tr> 

    <tr class=""> 
    <th scope="row"> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <td>New Vision Electric</td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 

    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    </tbody> 

</table> 

演示：https://jsfiddle.net/d2hfbh1p/

Answer 1

你應該總是試圖避免在實際項目執行崩潰要崩潰了。

當試圖崩潰的元素，你應該做的是包裝一個<div>標籤內的元素和.collapse類添加到<div>。要完成它，data-target應該定位您要摺疊的<div>元素。

<tr data-toggle="collapse" data-target=".subrow1> 
... 
<div class="collapse subrow1"> 
    <tr class=...>... 
</div>