当所有数据都显示出来时,前端做加载更多功能
<div class="main">
<ul class="showMore">
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
<li class="news_item"></li>
</ul>
<div class="news_list_btn" style="visibility: hidden;"></div>
</div>
js代码:
//封装一个函数-点击加载更多
function showMore(button, ul, showNumber, loadNumber) {
var list = showNumber;
var ul = $(ul);
var sum = ul.find("li").hide().size();
if (sum > list) {
$(button).css("visibility", "visible")
ul.find("li:lt(" + list + ")").show()
}
else {
ul.find("li").show().size();
$(button).css("visibility", "hidden");
}
$(button).on("click", function() {
list += loadNumber;
ul.find("li:lt(" + list + ")").slideDown();
if (list >= sum) {
$(this).css("visibility", "hidden");
}
});
}
/*
button:点击按钮
ul:列表ul
showNumber:第一次展示的个数
loadNumber:点击一次加载的个数
*/
showMore(".news_list_btn", ".showMore", 7, 4);
亲测有效