1、寫一個導覽條,點選標題時,可以伸縮導航條內容,簡化內容或顯示更多內容。 範例程式碼如下: 複製程式碼 程式碼如下: 程式碼如下: New Document 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 sppx;float:left} <BR>#divFrame .clsHead span{float:rightan ;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 ) i> 簡化 2、效果圖: 點擊後: 簡化後: