Bootstrap手风琴表平滑开合
问题描述:
我想创建一个Bootstrap手风琴表。当单击该行时,它将打开子行。他们打开很好,但问题是不平稳。我尝试了几乎所有的东西,但都没有成功。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>
答
你应该总是试图避免在实际项目执行崩溃要崩溃了。
当试图崩溃的元素,你应该做的是包装一个<div>
标签内的元素和.collapse
类添加到<div>
。要完成它,data-target
应该定位您要折叠的<div>
元素。
<tr data-toggle="collapse" data-target=".subrow1>
...
<div class="collapse subrow1">
<tr class=...>...
</div>
可以请您分享演示 –