javascript - 仅当元素超过 3 个时才显示更多内容按钮，否则不显示任何内容。使用jquery的:lt :gt

Question

我找到了一个几乎可以满足我要求的代码。但我不知道如何正确修改它来调整它的功能。

我想做的事情:

1. 如果列表项超过 3 个，则隐藏其余项目并显示“显示全部”按钮，单击该按钮即可显示其余项目。

2. 如果项目少于 2 个，则隐藏“显示全部”按钮。

3. 可选 - 在显示项目时添加漂亮的效果。

HTML

<span class="show_button">Show all</span>
<ul class="test">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

Javascript

$('ul.test li:gt(2)').hide();
if ( $('ul.test li:lt(2)') ) {
    $('.show_button').css('display', 'none');
}
else {
    $('.show_button').css('display', 'block');
}
$('.show_button').click(function() {
    $('ul.test li:gt(2)').show();
});

不幸的是，如果有超过 3 个项目可用，此代码不会显示“显示更多”按钮，而只是将其隐藏。

Answer 1

$('ul.test li:gt(2)').hide();

$('.show_button').click(function () {
    $('ul.test li:gt(2)').toggle('slide');
});

http://jsfiddle.net/BjG5M/