剛學完jQuery選擇器，閑來無事，照著書上的范例敲了一段代碼（HTML和CSS抄自書上），自己試著寫了寫jQuery的代碼，感覺相當輕便啊。
顯示效果：
功能說明：
1、點擊上邊的圖書分類一欄，實現向下的伸縮擴展，可以控制分類的顯示狀態；
2、“簡化”功能點擊后實現分類顯示菜單數量的簡化，簡化后，簡化字樣變成“展開”；
3、頁面中的兩個紅色箭頭圖標均為顯示狀態的圖標，每次點擊后都會變換相應的狀態效果。
代碼實現：
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta name="keywords" content=" keywords" /> <meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.7.2.min.js"></script><style type="text/css"> body{font-size:13px} #divFrame{border:solid 1px #666;width:301px;overflow:hidden} #divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:pointer} #divFrame .clsHead h3{padding:0px;margin:0px;float:left} #divFrame .clsHead span{float:right;margin-top:3px} #divFrame .clsContent{padding:8px} #divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px} #divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px} #divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px} .GetFocus{background-color:#eee}</style><body><script type="text/javascript"> $(function(){ $('.clsHead').click(function(){ if($('.clsContent').is(':visible')){ $('.clsContent').css('display','none'); $('.clsHead span img').attr('src','a.gif'); }else{ $('.clsContent').css('display','block'); $('.clsHead span img').attr('src','a2.gif'); } }); $('.clsBot').click(function(){ if($('li:last').is(':visible')){ $('li:gt(5)').css('display','none'); $('.clsBot a').html('展開'); $('.clsBot img').attr('src','a.gif'); }else{ $('li:gt(5)').css('display','block'); $('.clsBot a').html('簡化'); $('.clsBot img').attr('src','a2.gif'); } }); });</script><div id="divFrame"> <div class="clsHead"> <h3>圖書分類</h3> <span><img src="a2.gif" alt="" /></span> </div> <div class="clsContent"> <ul> <li><a href="#">小說</a><i>(1110) </i></li> <li><a href="#">文藝</a><i>(230) </i></li> <li><a href="#">青春</a><i>(1430) </i></li> <li><a href="#">少兒</a><i>(235) </i></li> <li><a href="#">生活</a><i>(7809) </i></li> <li><a href="#">社科</a><i>(876) </i></li> <li><a href="#">管理</a><i>(1234) </i></li> <li><a href="#">計算機</a><i>(2434) </i></li> <li><a href="#">教育</a><i>(234) </i></li> <li><a href="#">工具書</a><i>(7665) </i></li> <li><a href="#">引進版</a><i>(4557) </i></li> <li><a href="#">其他類</a><i>(4543) </i></li> </ul> <div class="clsBot"><a href="#">簡化</a> <img src="a2.gif"> </div> </div></div></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
