【Foreword】
Share a show more plugins
The principle is to send the entire background data to the front end. So the disadvantage is that it is not suitable for big data pages
【main body】
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery.more.js show more</title>
<style>
*{margin:0;padding:0}
ul,li{list-style:none}
.box{width:400px;margin:0 auto;}
.box h2{text-align:center;font: 22px/2.7 "Microsoft Yahei"}
.box li {background:#c2ccc2;padding: 0 5px; border-bottom:1px solid #ddd;margin-bottom:10px;display:none}
.box .showMorehandle{ text-align:center; cursor:pointer;margin-bottom: 20px;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.more.js"></script>
</head>
<body>
<div class="box">
<h2>jquery.more.js plugin show more</h2>
<ul class="showMoreNChildren" pagesize="3">
<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>l</li>
<li>m</li>
<li>n</li>
<li>o</li>
<li>p</li>
<li>q</li>
<li>r</li>
<li>s</li>
<li>t</li>
<li>u</li>
<li>v</li>
<li>w</li>
<li>x</li>
<li>y</li>
<li>z</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>
</div>
<script type="text/javascript">
// Call show more plugins. Parameters are standard jquery selectors
$.showMore(".showMoreNChildren,.mynews");
</script>
</body>
</html>
(function () {
var showMoreNChildren = function ($children, n) {
//Display the first n hidden child elements under a jquery element
var $hiddenChildren = $children.filter(":hidden");
var cnt = $hiddenChildren.length;
for ( var i = 0; i < n && i < cnt ; i++) {
$hiddenChildren.eq(i).slideDown();
}
return cnt-n;//Return the number of hidden child elements remaining
}
//For the existing elements of class=showMorehandle in the page, add and display more bars later, and bind the click behavior
$.showMore = function (selector) {
if (selector == undefined) { selector = ".showMoreNChildren" }
$(selector).each(function () {
var pagesize = $(this).attr("pagesize") || 10;
console.log(pagesize);
$(this).find("li:lt("+pagesize+")").show();
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) {
//If the target element has no hidden child elements, hide the "click more button bar"
$(this).hide();
};
});
}
});
}
})()
As for the jquery version, 1.8 or above can
.