Jquery隐藏/显示列表元素从ul

jquery hide/show list elements from ul

本文关键字：ul 列表元素 显示 隐藏 Jquery      更新时间：2023-09-26

我想制作一个处理列表元素的"显示更多/更少"的脚本。我找到了这个脚本:

HTML 

<ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>
CSS 

#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
}
#showLess:hover {
    color:black;
}
JQUERY 

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
        if(x<=3){$('#showLess').hide();}
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});
https://jsfiddle.net/6FzSb/1550/

现在我想知道javascript第6行和第10行是如何工作的，以及我如何隐藏showmore，如果所有条目都显示，以及如何隐藏showless，如果只有3个条目剩下如下所示?

你可以这样做

var visible = 3;
$("#myList li:lt(" + visible + ")").show();
$("#loadMore").click(function() {
    $("#showLess").show();
    visible = $("#myList li:visible").length + 3;
    $("#myList li:lt(" + visible + ")").show();
    if (visible == $("#myList li").length)
        $(this).hide();
});
$("#showLess").click(function() {
    $("#loadMore").show();
    visible = $("#myList li:visible").length - 3;
    $("#myList li:gt(" + (visible - 1) + ")").hide();
    if (3 == $("#myList li:visible").length)
        $(this).hide();
});

小提琴

如果你问

$('#myList li:lt('+x+')').show();

然后Google 'jquery selector lt'。

关于如何显示/隐藏显示更多/更少的链接:你有所有的提示在你的代码-你知道如何计算列表大小(..size())，如何隐藏和显示DOM元素(..hide()和..show())，所以现在有几个if块隐藏'show less'在加载和隐藏'show more'在点击处理程序

查看更新后的代码，

$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
 $('#showLess').hide();
$('#loadMore').click(function () {
    x= (x+5 <= size_li) ? x+5 : size_li;
    $('#myList li:lt('+x+')').show();
    if(size_li == x){
        $(this).hide();
    }else{
        $('#showLess').show();
    }
});
$('#showLess').click(function () {
    x=(x-5<0) ? 3 : x-5;
    $('#myList li').not(':lt('+x+')').hide();        
    if(x <= 3){
        $('#showLess').hide();
    }else{
       $('#loadMore').show(); 
    }
});

});

JSFIDDLE

相关文章：