基于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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
改善用户体验的五款jQuery插件分享
May 22 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
用JS实现选项卡
Mar 23 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 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中Session的概念
2006/10/09 PHP
目录,文件操作详谈―PHP
2006/11/25 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
python中返回矩阵的行列方法
2018/04/04 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
如何用Python合并lmdb文件
2018/07/02 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
python 实现绘制整齐的表格
2019/11/18 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
干部作风建设心得体会
2014/10/22 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫