<!DOCTYPE html>
<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();
          };
        });
      }
    });
  }
})();

基于jQuery实现点击列表加载更多效果的更多相关文章

  1. jquery Mobile点击显示加载等待效果

    点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...

  2. 微信小程序列表加载更多

    概述 基于小程序开发的列表加载更多例子. 详细 代码下载:http://www.demodashi.com/demo/13632.html 一.前言 基于小程序开发的列表加载更多例子. 二.运行效果 ...

  3. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  4. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  5. apiCloud实现加载更多效果，基本完美~

    apiCloud实现加载更多效果 1.接口支持,加入参数page. $page = $this->_request('page','trim','1'); $pagesize = 10; // ...

  6. JS 判断滚动底部并加载更多效果。。。。。。。。。

    JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...

  7. 使用jquery.more.js上滑加载更多

    html: <div id="more"> <div class="single_item"> <div class=" ...

  8. html ajax请求 php 下拉 加载更多数据 （也可点击按钮加载更多）

    <input type="hidden" class="total_num" id="total" value="{$tot ...

  9. jquery页面滑到底部加载更多

    $(window).scroll(function(){ var _scrolltop = $('body').scrollTop();if(_scrolltop+_winHeight>_doc ...

随机推荐

  1. java.io.FileNotFoundException:my-release-key.keyStore拒绝访问

    安卓生成APK的时候,生成密钥的时候报java.io.FileNotFoundException:my-release-key.keyStore拒绝访问的错误 这是因为权限问题:你的jdk目录在c盘, ...

  2. CMDB服务器管理系统【s5day90】：API验证

    1.认证思路刨析过程 1.请求头去哪里拿? 1.服务器端代码: def test(request): print(request) return HttpResponse('你得到我了') 2.客户端 ...

  3. tomcat无法正常关闭问题分析及解决

    问题描述 通常,我们都会直接使用tomcat提供的脚本执行关闭操作,如下: # sh bin/shutdown.sh Using CATALINA_BASE: /usr/local/apache-to ...

  4. JGUI源码：解决手机端点击出现半透明阴影(4)

    下面开始进入正题,问题发现与解决 1.According解决手机浏览器点击出现半透明阴影 手机下点击有白色蒙版,原始效果如下,看起来很不协调 2.解决办法:增加 -webkit-tap-highlig ...

  5. [物理学与PDEs]第3章第3节 电导率 $\sigma$ 为无穷时的磁流体力学方程组 3.3 磁场线``冻结''原理

    磁场线``冻结''原理: 在 $\sigma=\infty$ 时, 初始时刻分布在同一磁场线上的质点, 在运动过程中会一直保持在同一磁场线上, 即磁场线好像``冻结''在物质上. 事实上, $\cfr ...

  6. Scrapy 下载图片

    参考 : https://www.jianshu.com/p/6c8d2730d088 https://docs.scrapy.org/en/latest/topics/item-pipeline.h ...

  7. Django REST Framework API Guide 06

    本节大纲 1.Validators 2.Authentication Validators 在REST框架中处理验证的大多数时间,您将仅仅依赖于缺省字段验证,或在序列化器或字段类上编写显式验证方法.但 ...

  8. 2018-2019-1 20165234 实现mypwd

    实现mypwd(选做,加分) 1 学习pwd命令 2 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3 实现mypwd 4 测试mypwd 提交过程博客的链接

  9. springMVC源码笔记

    springMVC 设计总览 下图来源:https://www.cnblogs.com/fangjian0423/p/springMVC-directory-summary.html 下图来源:htt ...

  10. SQL Server - group by

    转载自https://segmentfault.com/a/1190000006821331 在平时的开发任务中我们经常会用到MYSQL的GROUP BY分组, 用来获取数据表中以分组字段为依据的统计 ...