1、编写一个导航条，单击标题时，可以伸缩导航条内容，简化内容或显示更多内容。 示例代码如下： 复制代码 代码如下: New Document <BR> <BR>body{font-size:13px} <BR>#divFrame{border:solid 1px #666;width:301px;overflow:hidden} <BR>#divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand} <BR>#divFrame .clsHead h3{padding:0px;margin:0px;float:left} <BR>#divFrame .clsHead span{float:right;margin-top:3px} <BR>#divFrame .clsContent{padding:8px} <BR>#divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px} <BR>#divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px} <BR>#divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px} <BR>.GetFocus{background-color:#eee} <BR> <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> 图书分类 小说 ( 1110 ) 文艺 ( 230 ) 青春 ( 1430 ) 少儿 ( 1560 ) 生活 ( 870 ) 社科 ( 1460 ) 管理 ( 1450 ) 计算机 ( 1780 ) 教育 ( 930 ) 工具书 ( 3450 ) 引进版 ( 980 ) 其它类 ( 3230 ) 简化 2、效果图： 点击后： 简化后：
