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


Posted in Javascript onMay 31, 2016

本文实例为大家分享了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();
          };
        });
      }
    });
  }
})();

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

Javascript 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 #Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 #Javascript
Bootstrap表单布局样式代码
May 31 #Javascript
jQuery使用经验小技巧(推荐)
May 31 #Javascript
JavaScript知识点总结(十)之this关键字
May 31 #Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 #Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 #Javascript
You might like
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python装饰器常见使用方法分析
2019/06/26 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
想学画画?python满足你!
2020/12/24 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
联想中国官方商城:Lenovo China
2017/10/18 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
.NET常见笔试题集
2012/12/01 面试题
业务员薪酬管理制度
2014/01/15 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
红色电影观后感
2015/06/18 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
基于Python实现一个春节倒计时脚本
2022/01/22 Python
Golang Web 框架Iris安装部署
2022/08/14 Python