，单击标题时，可以伸缩导航条内容，简化内容或显示更多内容。
示例代码如下：
复制代码 代码如下:
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> <br></script>
<script type="text/javascript"> <br>$(function(){ //页面加载事件 <br>$(".clsHead").click(function(){ //图片点击事件 <br>if($(".clsContent").is(":visible")){ //如果内容可见 <br>$(".clsHead span img").attr("src","Images/a1.gif"); //改变图片 <br>$(".clsContent").css("display","none"); //隐藏内容 <br>}else{ <br>$(".clsHead span img").attr("src","Images/a2.gif"); //改变图片 <br>$(".clsContent").css("display","block");//显示内容 <br>} <br>}); <br>$(".clsBot > a").click(function(){ //热点链接点击事件 <br>if($(".clsBot > a").text()=="简化"){ //如果内容为'简化'字样 <br>$("ul li:gt(4):not(:last)").hide(); //隐藏index号大于4且不是最后一项的元素 <br>$(".clsBot > a").text("更多"); //将字符内容更改为"更多" <br>}else{ <br>$("ul li:gt(4):not(:last)").show().addClass("GetFocus"); //显示所选元素且增加样式 <br>$(".clsBot > a").text("简化"); //将字符内容更改为"简化" <br>} <br>}); <br>}); <br></script>
图书分类
- 小说 ( 1110 )
- 文艺 ( 230 )
- 青春 ( 1430 )
- 少儿 ( 1560 )
- 生活 ( 870 )
- 社科 ( 1460 )
- 管理 ( 1450 )
- 计算机 ( 1780 )
- 教育 ( 930 )
- 工具书 ( 3450 )
- 引进版 ( 980 )
- 其它类 ( 3230 )
2、效果图
：
点击后：
简化后：
