基于jQuery实现点击列表加载更多效果

最新推荐文章于 2021-03-16 14:54:43 发布

weixin_30583563

最新推荐文章于 2021-03-16 14:54:43 发布

阅读量699

点赞数

文章标签： javascript 前端 xhtml ViewUI

原文链接：http://www.cnblogs.com/wulibo/p/7622153.html

版权

 
  <!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(); 
 
  }; 
 
  }); 
 
  } 
 
  }); 
 
  } 
 
  })();