Jquery，hide&在第n项后显示列表项 [英] Jquery, hide & show list items after nth item

问题描述

说我有一个无序列表，如下所示：

Say I have an unordered list, like so:

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ul>

我如何使用JQuery隐藏最后2个列表项并拥有显示更多链接那么，点击后，最后2个列表项会出现？

How would I, using JQuery, hide the last 2 list items and have a 'show more' link there, so when clicked upon, the last 2 list items would appear?

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li style="display:none;">Four</li>
   <li style="display:none;">Five</li>
   <li>Show More</li>
</ul>

推荐答案

尝试以下代码示例：

$('ul li:gt(3)').hide();
$('.show_button').click(function() {
    $('ul li:gt(3)').show();
});

这篇关于Jquery，hide&在第n项后显示列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！