<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>展开/收缩效果切换</title>
<style>
#box .hid{display:none;}
#box .show{display:block;}
#tog{cursor: pointer}
li{list-style: none}
</style>
</head>
<body>
<ul id="box">
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
<li>我是当前显示的内容</li>
</ul>
<p id="tog">展开</p>
<script type="text/javascript" src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<script>
var len=$("#box li").length;
function int(){
//设置显示多少条
for(i=8;i<len;i++){
$("#box li").eq(i).addClass("hid");
}
}
$("#tog").click(function(){
var t=$(this).text();
if(t=="展开"){
$("#box .hid").addClass("show");
$(this).text("收缩");
}else{
$("#box .hid").removeClass("show");
$(this).text("展开");
}
});
int();//初始化隐藏多余标签
</script>
</body>
</html>
效果图：
时间： 2024-10-07 15:47:37