jQuery切换隐藏和切换显示

Question

我正在尝试加载前10个element.click更多后显示其余元素。 我正在使用堆栈溢出解决方案。您可以在这里看到。 jQuery加载前3个元素，单击“加载更多”以显示后5个元素 。 现在，我正在尝试进行一些更改。 1：我想显示10个元素，然后查看更多标签。 与草龟捉迷藏。 2：当点击更多按钮后显示所有li元素，当全部li元素被加载后，点击更多按钮将显示更多按钮，隐藏更多按钮。 显示较少将被隐藏并显示更多加载按钮。

<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>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty one</li>
    <li>Twenty two</li>
    <li>Twenty three</li>
    <li>Twenty four</li>
    <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

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();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});

的CSS

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

Answer 1

与下面的^ O ^相同：

 $(document).ready(function () { size_li = $("#myList li").size(); x=10; $('#myList li:lt('+x+')').show(); if (size_li > 10) { $('#loadMore').show(); } $('#loadMore').click(function () { $('#myList li, #showLess').show(); $(this).hide(); }); $('#showLess').click(function () { $('#showLess, #myList li').hide(); $('#loadMore, #myList li:lt('+x+')').show(); }); }); 

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <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> <li>Thirteen</li> <li>Fourteen</li> <li>Fifteen</li> <li>Sixteen</li> <li>Seventeen</li> <li>Eighteen</li> <li>Nineteen</li> <li>Twenty one</li> <li>Twenty two</li> <li>Twenty three</li> <li>Twenty four</li> <li>Twenty five</li> </ul> <div id="loadMore">Load more</div> <div id="showLess">Show less</div>