部分与全部内容的显示收缩功能

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>