首頁 > 開發者 > JavaScript
基於jQuery實現點擊列表載入更多效果，jquery實現列表載入
本文執行個體為大家分享了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(); }; }); } }); }})();
以上就是本文的全部內容，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
