只是初始状态; 这是点击后效果。首相分析下需求:1,首先在页面中创建导航,单击标题的时候,隐藏内容,同时小图标也改变。2,单击更多的时候,显示隐藏的链接内容,并将"更多"变成"简化",改变小图标,并高亮部分链接。下面是完整代码: 复制代码 代码如下: text <BR> <BR>*{ margin:0;padding:0;} <BR>body{ font-size:13px;} <BR>#wraper{ border:1px solid #ccc; width:301px; overflow:hidden;} <BR>#wraper .Head{ background;#eee; padding:8px; height:18px; cursor:pointer;} <BR>#wraper .Head h3{ float:left;} <BR>#wraper .Head span{ float:right; margin-top:3px;} <BR>#wraper .Content{ padding:8px;} <BR>#wraper .Content ul{ list-style:none; list-style-type:none;} <BR>#wraper .Content ul li{ float:left; width:95px; height:23px; line-height:23px;} <BR>#wraper .Bot{ float:right; padding-top:5px; padding-bottom:5px;} <BR>.GetFocus{ background:#eee;} <BR>.one{ color:#ff8000;} <BR> <BR>$(function(){//页面加载事件 <BR>$(".Head").click(function(){//图片单击事件 <BR>if($(".Content").is(":visible")){//如果内容可见 <BR>$(".Head span img").attr("src","Images/a1.gif");//改变图片 <BR>//隐藏内容 <BR>$(".Content").hide(); <BR>}else{ <BR>$(".Head span img").attr("src","Images/a2.gif");//改变图片 <BR>$(".Content").show(); <BR>} <BR>}); <BR>var $chaLi = $(".Bot > a") ; <BR>var $prompt = $("ul li:gt(4):not(:last)") <BR>$prompt.hide(); <BR>$($chaLi).click(function(){//热点链接单击事件 <BR>//如果内容为简化 <BR>if($chaLi.text() == "更多"){ <BR>//隐藏大于4 且不是最后一项的所有内容 <BR>$(".Bot img").attr("src","Images/a7.gif") <BR>$prompt.show().addClass("GetFocus"); <BR>$("ul li").filter(":contains('青年'),:contains('老人'),:contains('少年')").addClass("one") <BR>$($chaLi).text("简化"); <BR>}else{ <BR>$prompt.hide() <BR>$(".Bot img").attr("src","Images/a6.gif") <BR>$($chaLi).text("更多"); <BR>} <BR>}) <BR>}) <BR> 图书分类 小说(1000) 文艺(1000) 知音(1000) 少儿(1000) 生活(1000) 社科(1000) 广利(1000) 美女(1000) 儿童(1000) 老人(1000) 少年(1000) 青年(1000) 成年(1000) 女人(1000) 父亲(1000) 木青(1000) 母亲(1000) 妹妹(1000) 其他(1000) 更多