基于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 相关文章推荐
jQuery版Tab标签切换
Mar 16 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
学习新党章思想汇报
2014/01/09 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
销售个人求职信范文
2014/04/28 职场文书
求职自我推荐信
2014/06/25 职场文书
医德医风个人总结
2015/02/28 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL