我想创建一个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>
答案 0 :(得分:0)
您应该始终避免尝试在要折叠的实际项目上执行折叠。
尝试折叠元素时,您应该将元素包装在<div>
标记内,并将.collapse
类添加到<div>
。要完成此操作,data-target
应定位您要折叠的<div>
元素。
<tr data-toggle="collapse" data-target=".subrow1>
...
<div class="collapse subrow1">
<tr class=...>...
</div>