<!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. Linux(1)-卸载挂载分区

    > df -lh > fuser -m -v /dev/mapper/autovg-autolv > fuser -m -k -v /dev/mapper/autovg-autolv ...

  2. saltstack主机管理项目：编写插件基类-获取主机列表-提取yaml配置文件（四）

    一.编写插件基类 1.目录结构 1.我是如何获知我有多少种系统? 当客户端第一连接过来的时候,我就已经把这些文件存下来了 ,存在到哪里了?存到数据库了 每次对主机发送命令的动作时,我从库里把数据取出来 ...

  3. VUE-Windows系统下搭建vue环境

    一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:).注意记下路径..   此处默认安装这4项即可,点击Next按钮. ...

  4. jQuery使用（十四）：extend()方法

    浅层克隆 深层克隆 扩展方法 一.extend的基本使用 语法: $.extend( target [, object1 ] [, objectN ] ) $.extend( [deep ], tar ...

  5. 库增删该查，表增删该查，记录增删该查，表与表关系(多对多，多对一，一对一)，mysql用户管理

    库增删该查 增加库 create database db1 create database db1 charset="gbk 查看库 show databases 查看所有库 show cr ...

  6. 深入浅出mybatis之返回主键ID

    目录 添加单一记录时返回主键ID 在映射器中配置获取记录主键值 获取新添加记录主键字段值 添加批量记录时返回主键ID 获取主键ID实现原理 添加记录后获取主键ID,这是一个很常见的需求,特别是在一次前 ...

  7. JavaScript 的正则也有单行模式了

    正则表达式最早是由 Ken Thompson 于 1970 年在他改进过的 QED 编辑器里实现的,正则里最简单的元字符 “.” 在当时所匹配的就是除换行符外的任意字符: "." ...

  8. .net实现md5加密 sha1加密 sha256加密 sha384加密 sha512加密 des加密解密

    写项目时,后台一直用md5加密,一天群里人问,除了MD5还有其它的加密方法吗?当时只知道还有个SHA,但怎么实现什么的都不清楚,于是当网上找了下,把几种常见的加密方法都整理了下,用winform写了个 ...

  9. Educational Codeforces Round 32 E. Maximum Subsequence

    题目链接 题意:给你两个数n,m,和一个大小为n的数组. 让你在数组找一些数使得这些数的和模m最大. 解法:考虑 dfs但是,数据范围不允许纯暴力,那考虑一下折半搜索,一个从头开始往中间搜,一个从后往 ...

  10. 移动端调用电话、短信、唤起QQ和使用百度地图

    H5能很方便地实现这些功能,都是一句代码搞定 调用电话 <a href="tel:12345678"> 短信 <a href='sms:12345678'> ...