基于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(); }; }); } }); } })();
以上就是本文的全部内容,希望对大家的学习有所帮助。