Question

我有一些jquery在点击时折叠了一些表行。有没有办法改变它以便加载折叠而不是打开？

HTML：

<table class="mob-table">
<tbody>
    <tr class="collapse">
        <td class="mob-dark">Listing - First Last</td>
    </tr>
    <tr>
        <td>Name: First Last</td>
    </tr>
    <tr>
        <td>Email: test@test.com</td>
    </tr>
    <tr>
        <td>Number: 123-456-7890</td>
    </tr>
</tbody>
</table>
<table>
<tbody>
    <tr class="collapse">
        <td class="mob-dark">Listing - First Last</td>
    </tr>
    <tr>
        <td>Name: First Last</td>
    </tr>
    <tr>
        <td>Email: test@test.com</td>
    </tr>
    <tr>
        <td>Number: 123-456-7890</td>
    </tr>
</tbody>
</table>

JQUERY：

$('.collapse').click(function(){
     $(this).nextUntil('tr.collapse').toggle();
});

JSFIDDLE

Answer 1

试试这个

$('tbody > tr:not(.collapse)').hide();

参见演示DEMO

如果你想使用css，你可以使用相同的选择器

tbody > tr:not(.collapse){
    display: none;
}

Answer 2

使用CSS实现这一目标的另一种方法（恕我直言，更合适的解决方案）：

.collapse ~ tr{
    display: none;
}

这会在您加载页面时隐藏所有.collapse tr的兄弟姐妹。 click事件仍然绑定到.collapse元素，并且可以点击。

查看here了解工作示例

如果你需要坚持jQuery，你可以：

1）隐藏所有.collapse tr兄弟姐妹：

$(".collapse").siblings("tr").toggle(); //--- or hide() in your case

2）触发.collapse元素上的点击事件以隐藏它们

$(".collapse").trigger("click");

折叠页面加载时的表行

2 个答案: