基于jQuery實(shí)現(xiàn)點(diǎn)擊列表加載更多效果

更新時(shí)間：2016年05月31日 16:33:14 作者：告別只是另一種體驗(yàn)

這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)點(diǎn)擊列表加載更多效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery點(diǎn)擊加載更多效果的具體代碼，供大家參考，具體內(nèi)容如下

<!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">
    //調(diào)用顯示更多插件。參數(shù)是標(biāo)準(zhǔn)的 jquery 選擇符 
    $.showMore(".showMoreNChildren,.mynews");
  </script>
</body>
</html>
JavaScript code
 
(function () {
  var showMoreNChildren = function ($children, n) {
    //顯示某jquery元素下的前n個(gè)隱藏的子元素
    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;//返回還剩余的隱藏子元素的數(shù)量
  }
 
  jQuery.showMore = function (selector) {
    if (selector == undefined) { selector = ".showMoreNChildren" }
    //對(duì)頁(yè)中現(xiàn)有的class=showMorehandle的元素，在之后添加顯示更多條，并綁定點(diǎn)擊行為
    $(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) {
            //如果目標(biāo)元素已經(jīng)沒(méi)有隱藏的子元素了，就隱藏“點(diǎn)擊更多的按鈕條”
            $(this).hide();
          };
        });
      }
    });
  }
})();

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: