<!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. input输入框自动获取焦点

    只要在该input标签后添加autofocus="autofocus"即可 代码实例: <html> <head></head> <bod ...

  2. python中 yield的用法和生成器generator的说明

    详情: https://www.cnblogs.com/python-life/articles/4549996.html

  3. SOC（网络安全管理平台）

    SOC平台,网络安全管理平台. 提供集中.统一.可视化的安全信息管理,通过实时采集各种安全信息,动态进行安全信息关联分析与风险评估,实现安全事件的快速跟踪.定位和应急响应.从监控.审计.风险和运维四个 ...

  4. c# mvc 在控制器中动态解析cshtml文件并获取对应的html代码

    public static string GetViewHtml(ControllerContext context, string viewName, Object param) { if (str ...

  5. 利用 /proc/sys/kernel/core_pattern隐藏系统后门

    ref:https://xz.aliyun.com/t/1098/ 这里所说的core_pattern 指的是:/proc/sys/kernel/core_pattern. 我们知道在Linux系统中 ...

  6. IIS版本号可以被识别 解决方案

    1.在IIS配置文件中进行修改. 借助IIS URL Rewrite Module,添加如下的重写规则: <rewrite> <allowedServerVariables> ...

  7. 解决Ubuntu 17.10设置面板打不开的问题

    问题描述 对于Ubuntu桌面系统我用得不多,最近安装了Ubuntu17.10使用,一直都没遇到什么大的问题,界面风格已经与Windows很相似,总体体验还不错.直到某一天我突然手痒痒把Dock面板从 ...

  8. [物理学与PDEs]第1章第1节 引言

    1. 电动力学研究的对象是电磁场, 研究电磁场的基本属性---运动规律及它和带电物质的相互作用. 2. 场, 物质的一种存在方式. 3. Maxwell 方程组是电动力学中的基本方程, 是一切有关电磁 ...

  9. MySQL学习9 - 单表查询

    一.单表查询的语法 二.关键字的执行优先级(重点) 三.单表查询示例 1.where约束 2.group by分组查询 3.聚合函数 4.HAVING过滤 5.order by查询排序 6.limit ...

  10. 转载-CentOS7关闭防火墙

    原文地址-http://www.cnblogs.com/silent2012/archive/2015/07/28/4682770.html CentOS 7.0默认使用的是firewall作为防火墙 ...