<html>
<head>
<title>测试jquery--导航条</title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<style>
body{font-size:13px;}
#divFrame{border:solid 1px #666; width:510px; overflow:hidden}
#divFrame .clsHead {background-color:#eee;padding:8px;height:18px;cursor:hand}
#divFrame .clsHead h3 {padding:0;margin:0;float:left;}
#divFrame .clsHead span {margin-top:3px;float:right;}
#divFrame .clsContent {padding:8px;}
#divFrame .clsContent ul{padding:0;margin:0;list-style-type:none;}
#divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px;}
#divFrame .clsBot {float:right;padding-bottom:5px;}
.GetFoucus {background-color:#eee;}
</style>
<script type="text/javascript">
//页面加载事件
$(function(){
//显示与隐藏
$(".clsHead").click(function(){
//如果内容可见
if($(".clsContent").is(":visible")){
$(".clsHead span img").attr("src","image/r2.gif");
$(".clsContent").css("display","none");
}else{
$(".clsHead span img").attr("src","image/r3.gif");
$(".clsContent").css("display","block");
}
});
//右下角--简化/更多
$(".clsBot >a").click(function(){
if($(".clsBot >a").text()=="简化"){
//隐藏index>4且不是最后一项的元素
$("ul li:gt(4):not(:last)").hide();
//将字符改为"更多"
$(".clsBot >a").text("更多");
}else{
//隐藏index>4且不是最后一项的元素
$("ul li:gt(4):not(:last)").show().addClass("GetFoucus");
//将字符改为"更多"
$(".clsBot >a").text("简化");
}
});
}
)
</script>
</head>
<body>
<div id="divFrame">
<div class="clsHead">
<h3>图书分类</h3>
<span><img src="image/r3.gif" alt=""/></span>
</div>
<div class="clsContent">
<ul>
<li><a href="#">小说</a><i>(1110)</i></li>
<li><a href="#">文艺</a><i>(230)</i></li>
<li><a href="#">青春</a><i>(1430)</i></li>
<li><a href="#">少儿</a><i>(1560)</i></li>
<li><a href="#">生活</a><i>(870)</i></li>
<li><a href="#">社科</a><i>(1460)</i></li>
<li><a href="#">管理</a><i>(1450)</i></li>
<li><a href="#">计算机</a><i>(1780)</i></li>
<li><a href="#">教育</a><i>(930)</i></li>
<li><a href="#">工具书</a><i>(3450)</i></li>
<li><a href="#">引进版</a><i>(980)</i></li>
<li><a href="#">其他类</a><i>(3230)</i></li>
</ul>
<div class="clsBot">
<a href="#">简化</a>
<img src="image/r1.gif" alt=""/>
</div>
</div>
</div>
</body>
</html>
jQuery页面折叠特效(2)html+js+图片+效果图
需积分: 15 60 浏览量
2014-12-10
23:10:18
上传
评论 2
收藏 49KB RAR 举报
JQuery折叠菜单.rar （8个子文件） 
JQuery折叠菜单 image 
r2.gif 581B r3.gif 570B r1.gif 314B
jquery-1.11.1.min.js 94KB 效果图 
展开前1.png 3KB 简化后3.png 5KB 展开后2.png 7KB
testNav.html 3KB资源评论
