基于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后$冲突的解决办法
Jul 09 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
vue实现分页组件
Jun 16 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
浅谈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中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP的全局错误处理详解
2016/04/25 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
js中判断控件是否存在
2010/08/25 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现Const详解
2015/01/27 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
详解Django通用视图中的函数包装
2015/07/21 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
对python 自定义协议的方法详解
2019/02/13 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
部门2014年度工作总结
2014/11/12 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书