Bootstrap 手风琴桌平滑打开和关闭答案

【问题标题】：Bootstrap accordion table smooth open and closeBootstrap 手风琴桌平滑打开和关闭
【发布时间】：2016-09-07 18:58:17
【问题描述】：

我想创建一个 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/

【问题讨论】：

标签： twitter-bootstrap html-table accordion

【解决方案1】：

您应始终避免尝试对要折叠的实际项目执行折叠。

当尝试折叠元素时，您应该将元素包裹在<div> 标记内，并将.collapse 类添加到<div>。要完成它，data-target 应该针对您要折叠的 <div> 元素。

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

【讨论】：

你能分享一个演示吗