基于jQuery实现点击列表加载更多效果

时间：2021-05-25

本文实例为大家分享了jQuery点击加载更多效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery showMore 显示更多</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.showMore.js"></script></head><body> <ul class="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> <ul class="mynews" pagesize="4"> <li>news 11</li> <li>news 12</li> <li>news 13</li> <li>news 14</li> <li>news 21</li> <li>news 22</li> <li>news 23</li> <li>news 24</li> <li>news 31</li> <li>news 32</li> <li>news 33</li> <li>news 34</li> </ul> <script type="text/javascript"> //调用显示更多插件。参数是标准的 jquery 选择符 $.showMore(".showMoreNChildren,.mynews"); </script></body></html>JavaScript code (function () { var showMoreNChildren = function ($children, n) { //显示某jquery元素下的前n个隐藏的子元素 var $hiddenChildren = $children.filter(":hidden"); var cnt = $hiddenChildren.length; for (var i = 0; i < n && i < cnt ; i++) { $hiddenChildren.eq(i).show(); } return cnt - n;//返回还剩余的隐藏子元素的数量 } jQuery.showMore = function (selector) { if (selector == undefined) { selector = ".showMoreNChildren" } //对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为 $(selector).each(function () { var pagesize = $(this).attr("pagesize") || 10; var $children = $(this).children(); if ($children.length > pagesize) { for (var i = pagesize; i < $children.length; i++) { $children.eq(i).hide(); } $("<div class='showMorehandle' >显示更多</div>").insertAfter($(this)).click(function () { if (showMoreNChildren($children, pagesize) <= 0) { //如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条” $(this).hide(); }; }); } }); }})();

以上就是本文的全部内容，希望对大家的学习有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章