1.有些時(shí)候，首頁(yè)加載更多的按鈕不需要用到ajax，通過(guò)特效展現(xiàn)，每次點(diǎn)擊展示兩行內(nèi)容。多余內(nèi)容隱藏掉。

html結(jié)構(gòu)

      <ul class="productsShow clearfix showMoreNChildren" pagesize="10">
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/image_18.jpg" alt="">
            <p class="mui-ellipsis-2">Xiaomi Note 4X Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod temporibus ipsa, consectetur numquam esse illo facilis minima, veritatis perferendis consequuntur incidunt. Dolor reiciendis incidunt totam illum placeat laborum quo eius.
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque et totam nesciunt, hic dicta atque culpa necessitatibus dolor non natus animi rerum, sint officiis minus maiores repellendus accusantium cum perferendis.
            </p>
          </a>
        </li>
      </ul>

CSS樣式忽略

JS代碼

  // // 加載更多
// start
(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ù)量
  }

  //對(duì)頁(yè)中現(xiàn)有的class=showMorehandle的元素，在之后添加顯示更多條，并綁定點(diǎn)擊行為
  $(".showMoreNChildren").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='loadMoreBox df-jcai-center'><div class='loadMore'><span class='loadMoreC'>Load More +</span></div></div>").insertAfter($(this)).click(function () {
        if (showMoreNChildren($children, pagesize) <= 0) {
          //如果目標(biāo)元素已經(jīng)沒(méi)有隱藏的子元素了，就隱藏“點(diǎn)擊更多的按鈕條”
          $(this).hide();
        };
      });
    }
  });
})();
  // end