折叠页面加载时的表行

时间:2014-12-30 01:09:42

标签: jquery

我有一些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

2 个答案:

答案 0 :(得分:1)

试试这个

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

参见演示DEMO

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

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

答案 1 :(得分:-1)

使用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");