只有当超过3个元素时才显示更多内容按钮，否则不显示.使用jquery's:lt:gt

show more content button only if more than 3 elements, else show nothing. Using jquery's :lt :gt

本文关键字：显示 使用 jquery lt gt 3个 元素 按钮      更新时间：2023-09-26

我找到了一个代码，几乎做了我想要的。但是我不知道如何正确地修改它来调整它的功能。

我想做的事情:

  1. 如果有超过3个列表项，隐藏其余的项目，并显示"显示全部"按钮，点击后显示其余项目

  2. 如果少于2个项目隐藏"显示全部"按钮

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

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

不幸的是，此代码不显示"show more"按钮，如果超过3项可用，它只是隐藏它。

$('ul.test li:gt(2)').hide();
$('.show_button').click(function () {
    $('ul.test li:gt(2)').toggle('slide');
});
http://jsfiddle.net/BjG5M/

只需要修改一行。第一个if语句块总是返回true。jQuery选择器总是返回一个对象，因此根据它的结果进行检查将总是返回true。返回的对象包含一个元素数组，如果没有元素被选择器匹配，该数组为空(长度为0)。

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

$('ul.test li:gt(2)').hide();
$('.show_button').click(function () {
    $('ul.test li:gt(2)').toggle('slide');
});
相关文章：