Twitter 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>

企业名称
类别
子类别
免费线索
付费线索
运动
地位
新视野电气
暖通空调
空调
05
10
暖通空调活动01
暖通空调
空调
05
10
暖通空调活动01
暖通空调
空调
05
10
暖通空调活动01
暖通空调
空调
05
10
暖通空调活动01
新视野电气
暖通空调
空调
05
10
暖通空调活动01
新的第3分行
暖通空调
空调
05
10
暖通空调活动01
新的第3分行
暖通空调
空调
05
10
暖通空调活动01
新视野电气
暖通空调
空调
05
10
未分配
新视野电气
暖通空调
空调
05
10
暖通空调活动01

---

演示：

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

当尝试折叠元素时，您应该做的是将元素包装在

标记中，并将

.collapse

类添加到

中。要完成它，

数据目标

应该以要折叠的

元素为目标

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

---

你能分享一个演示吗