默认折叠 Table 行 JQuery

Question

我实现了在另一个 Stack Overflow post 上找到的方法，以允许使用 JQuery 展开和折叠 table 行。该方法很简单并且按预期工作，但是我遇到了默认情况下扩展行的问题。我怎样才能使这些在页面加载时显示为折叠，以便用户可以决定展开哪些？

附带说明一下，有什么方法可以使 collapse/expand 看起来更流畅，而不是立即打开或关闭？

谢谢！

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

Answer 1

使用这个

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

your working code

Answer 2

试试这个：-

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

Fiddle

默认折叠 Table 行 JQuery

Collapse Table Rows with JQuery by Default

javascript

jquery

html

css

rows