<head>
<title>导航条在项目中的应用</title>
<style type="text/css">
boby{font-size:13px}
#divFrame{border:solid 1px #666;width:301px;overflow:hidden;}
#divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand;}
#divFrame .clsHead h3{padding:0px;margin:0px;float:left}
#divFrame .clsHead span{float:right;margin-top:3px}
#divFrame .clsContent{padding:8px}
#divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px}
#divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px;}
#divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px}
.GetFocus{background-color:#eee}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.clsHead').click(function () {
if ($('.clsContent').is(":visible")) {
$('.clsHead span img')
.attr('src', 'images/22.png')
$('.clsContent').css('display', 'none');
} else {
$('.clsHead span img')
.attr('src', 'images/11.png');
$('.clsContent').css('display', 'block');
}
});
$('.clsBot>a').click(function () {
if ($('.clsBot>a').text() == "简化") {
//隐藏index号大于4且不是最后一项的元素
$('ul li:gt(4):not(:last)').hide(2000);
$('.clsBot>a').text("更多");
}
else {
$('ul li:gt(4):not(:last)')
.show(2000)
.addClass('GetFocus');
$('.clsBot>a').text("简化");
}
})
})
</script>
</head>
<body>
<div id="divFrame">
<div class="clsHead">
<h3>图书分类</h3>
<span><img src="images/11.png" alt="" /></span>
</div>
<div class="clsContent">
<ul>
<li><a href="#">小说</a><i>(1110)</i></li>
<li><a href="#">文艺</a><i>(1110)</i></li>
<li><a href="#">青春</a><i>(1110)</i></li>
<li><a href="#">少儿</a><i>(1110)</i></li>
<li><a href="#">生活</a><i>(1110)</i></li>
<li><a href="#">社科</a><i>(1110)</i></li>
<li><a href="#">管理</a><i>(1110)</i></li>
<li><a href="#">计算机</a><i>(1110)</i></li>
<li><a href="#">教育</a><i>(1110)</i></li>
<li><a href="#">工具书</a><i>(1110)</i></li>
<li><a href="#">引进版</a><i>(1110)</i></li>
<li><a href="#">其他类</a><i>(1110)</i></li>
</ul>
<div class="clsBot"><a href="#">简化</a>
<img src="images/11.png" alt=""/>
</div>
</div>
</div>
</body>