展开/折叠多个引导表行

Question

我有一个Bootstrap表，默认显示三行数据和一个标题行。第5行有一个显示“更多...”的按钮。单击时，我希望将剩余的表格行滑入视图。

<table class="table table-condensed table-hover table-striped table-responsive table-noTopBorder noBottomMargin">
    <tr>
        <th>Date</th>
        <th>Title</th>
    </tr>
    <tr>
        <td>07/11/2017</td>
        <td><a href="#" target="_blank">CLE by the Sea Ethics</a></td>
    </tr>
    <tr>
        <td>07/12/2017</td>
        <td><a href="#" target="_blank">CLE by the Sea Family Law Day 1</a></td>
    </tr>
    <tr>
        <td>
            07/13/2017
        </td>
        <td><a href="#" target="_blank">CLE by the Sea Family Law Day 2</a></td>
    </tr>
    <tr id="moreCLEEvents" class="collapse out">
        <td>
            08/07/2017
        </td>
        <td><a href="#" target="_blank">Professionalism in the Workplace</a></td>
    </tr>
    <tr>
        <td>
            <a href="#" class="btn btn-primary btn-xs" data-toggle="moreCLEEvents">more...</a>
        </td>
        <td>
            <a href="#" class="btn btn-primary btn-xs" target="_blank">Calendar View</a>
        </td>
    </tr>
</table>

我发现的帖子显示了各种方法来显示/隐藏单个表行但不包含多行或多行。我不能使用tbody因为tbody没有高度所以崩溃失败。

Answer 1

您可以在按钮后面的所有tr中应用隐藏类（display：none），然后使用jquery：

$('a[data-toggle="moreCLEEvents"]').click(function() {
   $(this).closest('tr').nextAll('tr').slideToggle();
});

小提琴：https://jsfiddle.net/x5cdrpwj/