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

Collapse Table Rows with JQuery by Default

本文关键字：折叠 JQuery 情况下 默认      更新时间：2024-06-16

我实现了另一篇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>

试试这个：-

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

Fiddle

使用此

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

您的工作代码

相关文章：