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>