Question

我发现了一个几乎可以实现我想要的代码。但我不知道如何正确地修改它以调整它的功能。

我想做的事情：

如果有超过3个列表项，请隐藏其余项目并显示＆＃34;全部显示＆＃34;单击时显示其余项目的按钮。
如果少于2个项目隐藏＆＃34;显示全部＆＃34;按钮。
可选 - 在显示项目时添加一个很好的效果。

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();
});

不幸的是，此代码无法显示＆＃34;显示更多＆＃34;如果有超过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-block总是返回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');
});

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

3 个答案: