默认情况下使用 JQuery 折叠表行答案

【问题标题】：Collapse Table Rows with JQuery by Default默认情况下使用 JQuery 折叠表行
【发布时间】：2015-02-26 13:44:41
【问题描述】：

我实现了另一个 Stack Overflow 帖子中的方法，允许使用 JQuery 扩展和折叠表行。该方法很简单并且可以按预期工作，但是我遇到了默认情况下会扩展行的问题。如何使这些在页面加载时显示为折叠状态，以便用户可以决定要展开哪些？

作为旁注，有什么方法可以让折叠/展开看起来更顺畅，而不仅仅是立即打开或关闭？

谢谢！

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    $( document ).ready(function()
    {
        $('.header').click(function()
        {
            $(this).nextUntil('tr.header').slideToggle(1000);
        });
    });
</script>
</head>
<body>

<table>
    <tr class="header">
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
    </tr>
    <tr>
        <td>meep</td>
        <td>meep</td>
        <td>meep</td>
        <td>meep</td>
    </tr>
    <tr class="header">
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
        <td>TEST</td>
    </tr>
    <tr>
        <td>meep</td>
        <td>meep</td>
        <td>meep</td>
        <td>meep</td>
    </tr>
</table>

</body>
</html>

【问题讨论】：

标签： javascript jquery html css rows

【解决方案1】：

试试这个：-

$('table tr:not(.header)').hide();

Fiddle

【讨论】：

这对我来说非常有效。只是出于好奇，因为我以前没有见过这种语法，我怎么能排除多个东西？在我的实际代码中，我也有一个隐藏的标题行，但也想排除它。谢谢！
@BrettPowell ...只需访问我在答案中提到的小提琴链接...我已经根据您的要求排除了带有.header类的tr。

【解决方案2】：

使用这个

$('.header + tr').hide();

your working code

【讨论】：