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/

Answer 2

您只需要更改一行。你的第一个 if 块总是返回 true。选择jQuery器始终返回一个对象，因此检查它的结果将始终返回 true。返回的对象包含一个元素数组，如果选择器没有匹配任何元素，则该数组为空（长度为 0）。

if ( $('ul.test li:gt(2)').length > 0 ) {
    $('.show_button').css('display', 'block');
} else {
    $('.show_button').css('display', 'none');
}

Answer 3

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

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