案例：
一、首先我们先写一个HTML布局
<html><head><meta charset="utf-8"><title></title></head><body><div id="main"><div id="head"><h2>图书分类</h2><span id="pic" index="0"></span></div><div id="body"><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></div></body></html>
二、接下来我们来写css的布局
* {margin: 0px;padding: 0px;}ul li {list-style: none;}#main {width: 300px;height: 250px;margin: 20px auto;}#head {width: 300px;height: 50px;background-color: darkgrey;border: 1px black solid;float: left;}#head h2{float: left;font-size: 18PX;padding-top: 14px;width: 200px;margin-left: 10px;}#pic {display: block;background: url(../img/pic.png);width: 25px;float: right;height: 12.5px;margin-top: 20px;}#body{border: black 1px solid;width: 300px;height: 200px;}#content ul li {float: left;width: 80px;font-size: 2px;margin-left: 10PX;margin-top: 10PX;}#content ul li a {color: #000000;}#foot {float: right;clear: both; /* 不浮动 */}
三、在HTML里引入css布局（link）
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/图书菜单导航栏.css"/></head><body></body></html>
四、引入JQ类库---书写代码
用if...else结构书写点击 " 简化☚" ，图书分类收起至五个（前四个+最后一个）。
点击 " 更多" ，图书分类展开至全部。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script src="js/JQuery.js"></script><script type="text/javascript">$(function(){$("#pic").click(function(){var index = $(this).attr("index");if (index == 0) {//修改图标$(this).css("background","url(img/pic.png)");$(this).css("margin-top","20px");$(this).attr("index","1");//让内容隐藏$("#body").slideUp(1000);} else{//修改图标$(this).css("background","url(img/pic.png)0 12.5px");$(this).css("margin-top","24px");$(this).attr("index","0");//让内容显示$("#body").slideDown(1000);}});$("#foot>a").click(function(){//判断li是否是隐藏if($("#content>ul>li").is(":hidden")){//是隐藏就显示$("#content>ul>li").fadeIn(1000);$(this).text("简化☚");return false;}else{//不是隐藏就隐藏$("#content>ul>li:gt(4)").not(":last").fadeOut(1000);$(this).text("更多");return false;}});});</script></body></html>
整体代码示例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/图书菜单导航栏.css"/></head><body><div id="main"><div id="head"><h2>图书分类</h2><span id="pic" index="0"></span></div><div id="body"><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></div><script src="js/JQuery.js"></script><script type="text/javascript">$(function(){$("#pic").click(function(){var index = $(this).attr("index");if (index == 0) {//修改图标$(this).css("background","url(img/pic.png)");$(this).css("margin-top","20px");$(this).attr("index","1");//让内容隐藏$("#body").slideUp(1000);} else{//修改图标$(this).css("background","url(img/pic.png)0 12.5px");$(this).css("margin-top","24px");$(this).attr("index","0");//让内容显示$("#body").slideDown(1000);}});$("#foot>a").click(function(){//判断li是否是隐藏if($("#content>ul>li").is(":hidden")){//是隐藏就显示$("#content>ul>li").fadeIn(1000);$(this).text("简化☚");return false;}else{//不是隐藏就隐藏$("#content>ul>li:gt(4)").not(":last").fadeOut(1000);$(this).text("更多");return false;}});});</script></body></html>
效果演示：
