초기상태입니다 이것이 클릭 후 효과입니다. 국무총리가 요구사항을 분석했습니다. 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) 更多