匹配列表的点击事件和css的美化
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
}
#content ul li {
float: left;
margin-left: 7px;
margin-top: 20px;
}
#main {
width: 405px;
height: 300px;
margin-left: 200px;
overflow: auto;
}
#head span {
display: block;
width: 25px;
height: 12.5px;
background: url(img/pic.png);
margin: 18px auto;
margin-left: 240px;
float: left;
}
#head h2 {
float: left;
}
#head {
width: 400px;
height: 60px;
line-height: 50px;
border: 2px black solid;
background-color: darkgray;
}
#content {
width: 400px;
height: 200px;
overflow: auto;
border: 1px black solid;
}
#foot {
width: 400px;
height: 20p;
}
#foot a {
margin-left: 350px;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#pic").click(function() {
var index = $(this).attr("index");
if (index == 0) {
$(this).css("background", "url(img/pic.png) 0 12.5px");
$("#content").slideUp(1000);
$("#foot").slideUp(1000);
$(this).attr("index", 1);
} else {
$(this).css("background", "url(img/pic.png)");
$("#content").slideDown(1000);
$("#foot").slideDown(1000);
$(this).attr("index", 0);
}
});
var flag = true;
$("#foot a").click(function(){
if(flag){
//判断在点击的时候li索引大于4的时候隐藏
$("#content>ul>li:gt(4)").not(":last").fadeOut();
//设置点击按钮 更多
$(this).text("更多☚");
flag = false;
}else{
//点击显示全部li标签
$("#content>ul>li").fadeIn();
$(this).text("简化☚");
flag = true;
}
return false;
});
});
</script>
</head>
<body>
<div id="main">
<div id="head">
<h2>图书分类</h2>
<span id="pic" index="0">
</span>
</div>
<div id="content">
<ul>
<li><a href="#">小说</a><i>(1110)</i></li>
<li><a href="#">文艺</a><i>(2350)</i></li>
<li><a href="#">青春</a><i>(1985)</i></li>
<li><a href="#">少儿</a><i>(1102)</i></li>
<li><a href="#">生活</a><i>(2350)</i></li>
<li><a href="#">社科</a><i>(5684)</i></li>
<li><a href="#">管理</a><i>(1256)</i></li>
<li><a href="#">计算机</a><i>(2135)</i></li>
<li><a href="#">教育</a><i>(3120)</i></li>
<li><a href="#">工具书</a><i>(4213)</i></li>
<li><a href="#">引进版</a><i>(1752)</i></li>
<li><a href="#">其他类</a><i>(9872)</i></li>
</ul>
</div>
<div id="foot">
<a href="">简化☚</a>
</div>
</div>
</body>
</html>