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>

Bootstrap手风琴表平滑打开和关闭

1 个答案: