html内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航条的展开与收缩</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="divFrame">
<div class="clsHead">
<h3>图书分类</h3>
<span><img src="down_arrow.png" alt=""></span>
</div>
<div class="clsContent">
<ul>
<li><a href="#">小说</a></li>
<li><a href="#">文艺</a></li>
<li><a href="#">青春</a></li>
<li><a href="#">少儿</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">社科</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">计算机</a></li>
<li><a href="#">教育</a></li>
<li><a href="#">工具书</a></li>
<li><a href="#">引进版</a></li>
<li><a href="#">其他类</a></li>
</ul>
<div class="clsBot"><a href="#">简化</a></div>
</div>
</div>
<script>
$(document).ready(function(){
$(".clsHead").click(function(){
if($(".clsContent").is(":visible")){
$(".clsHead span img").attr("src","up_arrow.png");
$(".clsContent").css("display","none");
}else{
$(".clsHead span img").attr("src","down_arrow.png");
$(".clsContent").css("display","block");
}
});
$(".clsBot>a").click(function(){
if($(".clsBot>a").text()=="简化"){
$("ul li:gt(4):not(:last)").hide();
$(".clsBot>a").text("更多");
}else{
$("ul li:gt(4):not(:last)").show();
$(".clsBot>a").text("简化");
}
});
})
</script>
</body>
</html>
css内容
.divFrame{
width:300px; overflow:hidden; border:1px solid #ddd;
}
.clsHead{
height:18px; padding:8px; background-color:#eee;
}
.clsHead h3{
float:left;
}
.clsHead span{
margin-top:-3px; float:right;
}
.clsContent{
overflow:hidden;
}
.clsContent ul{
}
.clsContent ul li{
width:100px; height:24px; line-height:24px; padding:6px 0; text-align:center; float:left;
}
.clsContent .clsBot{
line-height:30px; padding-right:20px; text-align:right;
}
.clsContent .clsBot a{
color:#F00;
}
.getFocus{
background-color:#eee;
}