切换其他表行的可见性

Question

我有一个表,我想默认只显示第一行,但如果用户点击"显示更多"链接,则显示额外的X行数(如果用户点击"显示更少",则反向隐藏X行) ).

举个例子,我希望页面加载时的默认视图如下:

 Top Scores
====================================
|   1 | show this row always!      |
====================================
 -show more-

然后,如果用户单击"显示更多",则表格应扩展为包含其他行,如下所示:

 Top Scores
====================================
|   1 | show this row always!      |
|   2 | newly displayed row        |
|   3 | newly displayed row        |
|   4 | newly displayed row        |
|   5 | newly displayed row        |
====================================
 -show less-

然后很明显,如果用户点击"显示更少",表格将返回默认值(仅显示第一行).

我熟悉.toggle()jQuery中的函数,但不确定它是否可以在这里应用或者我是否需要做更多的手工操作.

谢谢!

Answer 1

没有额外的类，不需要标题 - http://jsfiddle.net/wgSZs/

$('table').find('tr:gt(0)').hide();

$("button").on("click", function() {
    $('table').find('tr:gt(0)').toggle();
});

更新

最好通过 CSS 而不是 jQuery 隐藏附加行，以避免在下载和应用 JS 时发生元素移动。但仍然不需要添加类 - 保持标记尽可能干净是个好主意。你可以这样做：

table tr { display: none }
table tr:first-child { display: block }

这是工作示例 - http://jsfiddle.net/wgSZs/1/