jquery - 展开/折叠多个引导表行

我有一个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没有高度，因此崩溃失败。

最佳答案

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

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

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

关于jquery - 展开/折叠多个引导表行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44786737/