基于jQuery实现点击列表加载更多效果
本文实例为大家分享了jQuery点击加载更多效果的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jqueryshowMore显示更多</title>
<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>
<scripttype="text/javascript"src="js/jquery.showMore.js"></script>
</head>
<body>
<ulclass="showMoreNChildren"pagesize="5">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>m</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>m</li>
</ul>
<ulclass="mynews"pagesize="4">
<li>news11</li>
<li>news12</li>
<li>news13</li>
<li>news14</li>
<li>news21</li>
<li>news22</li>
<li>news23</li>
<li>news24</li>
<li>news31</li>
<li>news32</li>
<li>news33</li>
<li>news34</li>
</ul>
<scripttype="text/javascript">
//调用显示更多插件。参数是标准的jquery选择符
$.showMore(".showMoreNChildren,.mynews");
</script>
</body>
</html>
JavaScriptcode
(function(){
varshowMoreNChildren=function($children,n){
//显示某jquery元素下的前n个隐藏的子元素
var$hiddenChildren=$children.filter(":hidden");
varcnt=$hiddenChildren.length;
for(vari=0;i<n&&i<cnt;i++){
$hiddenChildren.eq(i).show();
}
returncnt-n;//返回还剩余的隐藏子元素的数量
}
jQuery.showMore=function(selector){
if(selector==undefined){selector=".showMoreNChildren"}
//对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
$(selector).each(function(){
varpagesize=$(this).attr("pagesize")||10;
var$children=$(this).children();
if($children.length>pagesize){
for(vari=pagesize;i<$children.length;i++){
$children.eq(i).hide();
}
$("<divclass='showMorehandle'>显示更多</div>").insertAfter($(this)).click(function(){
if(showMoreNChildren($children,pagesize)<=0){
//如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
$(this).hide();
};
});
}
});
}
})();
以上就是本文的全部内容，希望对大家的学习有所帮助。