关于jquery显示部分li元素的方法

发布时间 2023-11-18 15:21:08作者: Jweib

<!--如果大于等于3只显示到这里剩下的 4 和 5不显示-->
$('.one ul li:gt(3)').hide();
$('.one ul li:last').show();
<!--点这个显示 4 和 5 -->
$('.one ul li:last').click(function(){
$('.one ul li:gt(3)').show();
});

 

<div class="one">
<ul>
<li>我是链接1</li>
<li>我是链接2</li>
<li>我是链接3</li>
<!--如果大于等于3只显示到这里剩下的 4 和 5不显示-->
<li>我是链接4</li>
<li>我是链接5</li>
<li>查看更多链接</li>
<!--点这个显示 4 和 5 -->
</ul>
</div>

来源地址:https://blog.csdn.net/soulwyb/article/details/89225532

---------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML>

<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    var CRT = 3; // 如果大于等于3
    jQuery (function ($)
    {
        $ ("div.one li").filter ("li:gt(" + (CRT - 1) + ")").hide ().filter (":last").show ().click (function ()
        {
            $ (this).siblings ("li:gt(" + (CRT - 1) + ")").toggle ();
        });
    });
</script>
</head>
<body>
    <div class="one">
        <ul>
            <li>我是链接1</li>
            <li>我是链接2</li>
            <li>我是链接3</li>
            <!--如果大于等于3只显示到这里剩下的 4 和 5不显示-->
            <li>我是链接4</li>
            <li>我是链接5</li>
            <li>查看更多链接</li>
            <!--点这个显示 4 和 5 -->
        </ul>
    </div>
</body>
</html>