部分與全部內容的顯示收縮功能

css樣式：

*{ margin:0; padding:0;} .SubCategoryBox{ margin:0 auto; width:600px;} .SubCategoryBox ul{ list-style-type:none;} .SubCategoryBox li{ float:left; width:200px; line-height:25px;} .a { text-decoration:none;} .showmore{ clear:both; padding-top:30px; text-align:center;} .important a{ color:#f00;}

javascript代碼：

$(function () { var hideColumn = $(".SubCategoryBox ul li:gt(3):not(:last)"); //選定索引大於3且不是最後一個元素的部分 hideColumn.hide(); //默認隱藏 //var btn = $(".showmore > a"); //選定.showmore下的直接a元素部分，以下是選擇其下的所有a部分包括兒子，孫子 var btn = $(".showmore a"); /* btn.click(function () { //爲按鈕增加點擊事件 if (hideColumn.is(":visible")) {//如果隱藏部分顯示時 hideColumn.hide(); //使其隱藏 $(".SubCategoryBox ul li").removeClass("important"); //去掉相應樣式 $(".showmore a span").text("顯示全部欄目"); //設定按鈕文本內容 } else { hideColumn.show(); //使其顯示 $(".SubCategoryBox ul li").filter(":contains('質檢快訊'),:contains('總局令'),:contains('領導活動')").addClass("important"); //去掉相應樣式 $(".showmore a span").text("精簡顯示欄目"); //設定按鈕文本內容 } return false; //不打開超鏈接 }); */ btn.toggle(function () { hideColumn.hide(); //使其隱藏 $(".SubCategoryBox ul li").removeClass("important"); //去掉相應樣式 $(".showmore a span").text("顯示全部欄目"); //設定按鈕文本內容 }, function () { hideColumn.show(); //使其顯示 $(".SubCategoryBox ul li").filter(":contains('質檢快訊'),:contains('總局令'),:contains('領導活動')").addClass("important"); //去掉相應樣式 $(".showmore a span").text("精簡顯示欄目"); //設定按鈕文本內容 }); });

網頁內容：

<div class="SubCategoryBox"> <ul> <li ><a href="#">質檢快訊</a><i>(30440) </i></li> <li ><a href="#">3.15活動</a><i>(27220) </i></li> <li ><a href="#">質量月活動</a><i>(20808) </i></li> <li ><a href="#">曝光臺</a><i>(17821) </i></li> <li ><a href="#">質量消費信息</a><i>(12289) </i></li> <li ><a href="#">打假動態</a><i>(8242) </i></li> <li ><a href="#">特別關注</a><i>(14894) </i></li> <li ><a href="#">權威發佈</a><i>(9520) </i></li> <li ><a href="#">總局令</a><i>(2195) </i></li> <li ><a href="#">總局公告</a><i>(4114) </i></li> <li ><a href="#">聯合公告</a><i>(12205) </i></li> <li ><a href="#">法律法規</a><i>(1466) </i></li> <li ><a href="#">領導活動</a><i>(3091) </i></li> <li ><a href="#">其它欄目</a><i>(7275) </i></li> </ul> <div class="showmore"> <a href="more.html" mce_href="more.html"><span>顯示全部欄目</span></a> </div> </div>