图书分类前端代码解析-优快云博客

本文链接：https://blog.youkuaiyun.com/tianjun2012/article/details/50188897

看下效果：

（1）

现在就来看下前端代码：js代码还是比较容易的。

<html>
	<head>
		<meta charset="UTF-8">
		<title>标题</title>
		<script language="JavaScript" type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
		<style>
			body {
			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 type="text/javascript">
			$(function(){
				$(".clsHead").click(function(){
					if ($(".clsContent").is(":visible")){
						$(".clsHead span img").attr("src","images/a1.gif");
						$('.clsContent').css("display","none");
					}else{
						$(".clsHead span img").attr("src","images/a2.gif");
						$(".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().addClass("GetFocus");
						$(".clsBot > a").text("简化");
					}
				})
			})
		</script>
	</head>
	<body>
		<div id="divFrame">
			<div class="clsHead">
				<h3>图书分类</h3>
				<span><img src="images/a2.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="images/a5.gif" alt="" />
				</div>
			</div>
		</div>
	</body>
</html>

可以伸缩的导航栏