用法很简单：
1，把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这种
这个pagesizie有一个默认值10。可以不写
如
XML/HTML code
<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>
</ul>
2,页面尾部引用这个插件js文件(在之前要先引入jquery)
<script type="text/javascript" src="js/jquery.showmorechildren.js"></script>
js代码如下
JavaScript code
(function () {
var showMoreNChildren = function ($children, n) {
//显示某jquery元素下的前n个隐藏的子元素
var $hiddenChildren = $children.filter(":hidden")
var cnt = $hiddenChildren.length
for ( var i = 0i <n &&i <cnt i++) {
$hiddenChildren.eq(i).show()
}
return cnt-n//返回还剩余的隐藏子元素的数量
}
//对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
$(".showMoreNChildren").each(function () {
var pagesize = $(this).attr("pagesize") || 10
var $children = $(this).children()
if ($children.length >pagesize) {
for (var i = pagesizei <$children.lengthi++) {
$children.eq(i).hide()
}
$("<div class='showMorehandle' >显示更多</div>").insertAfter($(this)).click(function () {
if (showMoreNChildren($children, pagesize) <= 0) {
//如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
$(this).hide()
}
})
}
})
})()
<style>.hotword{width:68pxheight:68pxoverflow:hidden}
ul{list-style:noneoverflow:hidden}
ul li{width:68pxheight:68pxposition:relative}
ul li a{display:blockwidth:68pxheight:68px}
ul li .dis1{background:blue}
ul li .dis2{background:#999position:absoluteleft:0top:68px}
</style>
</head>
<body>
<div class="hotword">
<ul>
<li><a class="dis1" href="#">泰英拉总理下台</a><a class="dis2" href="#">泰英拉总理下台</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$("ul li").hover(function(){
$(".dis2").animate({top:"0px"},300)},
function(){
$(".dis2").animate({top:"68px"},300)
})
})
</script>
这是我自己写的，可以实现一样的效果。你可以试试。。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）