使用jquery實現的多級樹形菜單代碼實例:樹形菜單在網站中有大量的應用，這當然是因為它的獨特優點，首先它可以有效的組織數據，使分類更為清晰明瞭，通常情況下樹形菜單是可以摺疊的，這樣可以以更小的空間容納更多的數據，下麵就詳細介紹一個使用jquery實現的屬性菜單。代碼實例如下:螞蟻部落 KPI考核....
使用jquery實現的多級樹形菜單代碼實例:
樹形菜單在網站中有大量的應用，這當然是因為它的獨特優點，首先它可以有效的組織數據，使分類更為清晰明瞭，通常情況下樹形菜單是可以摺疊的，這樣可以以更小的空間容納更多的數據，下麵就詳細介紹一個使用jquery實現的屬性菜單。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> h1, h2, h3, h4, h5, p, dl, dt, dd, ul, ol, li, input, img, body, button, form, table{ margin:0; padding:0; border:0; list-style:none; font-size:12px; font-weight:normal } a{text-decoration:none} a:link, a:visited{color:#333} a:hover{background:#FC9} .aside{ width:163px; padding-left:10px } .aside h2{ font-size:16px; padding-left:15px } .all{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 6px;} .all1{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 -41px} .box{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 10px;} .box1{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 -37px} .aside ul{margin-left:15px} .aside li{ display:none; height:24px; line-height:24px; margin-left:26px } .aside .bold{ display:block; font-size:14px; height:30px; line-height:30px; padding-left:15px } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.all1').toggle(function(){ $(this).removeClass('all1').addClass('all').siblings('.myUl').slideUp(); },function(){ $(this).removeClass('all').addClass('all1').siblings('.myUl').slideDown(); }); $('.box').toggle(function(){ $(this).removeClass('box').addClass('box1'); },function(){ $(this).removeClass('box1').addClass('box'); }); $('.bold').toggle(function(){ $(this).siblings().slideDown(); },function(){ $(this).siblings().slideUp(); }) }) </script> </head> <body> <div class="aside"> <h2 class="all1">KPI考核指標</h2> <ul class="myUl"> <span class="bold box">當月考核結果</span> <li><a href="" title="" alt="">日考核結果跟蹤</a></li> <li><a href="" title="" alt="">日考核扣分分析</a></li> <li><a href="" title="" alt="">日扣分占比分析</a></li> <li><a href="" title="" alt="">月扣分占比分析</a></li> <li><a href="" title="" alt="">考核異常跟蹤</a></li> </ul> <ul class="myUl"> <span class="bold box">年累計考核結果</span> <li><a href="" title="" alt="">月考核結果跟蹤</a></li> <li><a href="" title="" alt="">年累計扣分分析</a></li> <li><a href="" title="" alt="">扣分占比分析</a></li> </ul> <ul class="myUl"> <span class="bold box">數據統計</span> <li><a href="" title="" alt="">考核指標環比分析</a></li> <li><a href="" title="" alt="">考核指標扣分占比分析</a></li> <li><a href="" title="" alt="">考核指標趨勢分析</a></li> <li><a href="" title="" alt="">考核指標排名分析</a></li> <li><a href="" title="" alt="">考核指標同比分析</a></li> </ul> </div> </body> </html>
以上代碼實現了我們的要求，可以實現屬性菜單的摺疊和展開效果，下麵介紹一下它的實現過程。
一.實現原理:
1.摺疊和展開圖標的切換:
摺疊和展開圖標其實是在一張背景圖上，當點擊的時候，通過控制背景圖片的位置就實現了切換效果，具體可以參閱CSS的background-position定位詳解一章節。
2.菜單的摺疊和隱藏:
菜單的摺疊和隱藏主要是控制標題元素的兄弟元素的隱藏和顯示實現的，這裡不多介紹了，可以參閱相關閱讀。
二.代碼註釋:
1.$(document).ready(function(){}),文檔結構完全載入完畢再去執行函數中的代碼。
2.$('.all1').toggle(function(){},function(){})，點擊元素切換函數的執行。
3.$(this).removeClass('all1').addClass('all').siblings('.myUl').slideUp()，這是一個鏈式調用，首先會移出當前點擊元素上的樣式class屬性all1，然後為再為其添加樣式class屬性all，然後將它的同輩元素中class屬性值為myUl的元素收縮隱藏，一句話，這段代碼實現了點擊一級樹，實現二級數樹隱藏效果。
4.$(this).removeClass('all').addClass('all1').siblings('.myUl').slideDown()，此代碼和上面的作用相反，點擊一級樹，實現二級數的顯示效果。下麵代碼功能都是類似的，這裡就不多介紹了。
三.相關閱讀:
1.toggle()可以參閱jQuery的toggle()方法一章節。
2.removeClass()函數可以參閱jQuery的removeClass()方法一章節。
3.addClass()函數可以參閱jQuery的addClass()方法一章節。
4.siblings()函數可以參閱jQuery的siblings()方法一章節。
5.slideUp()函數可以參閱jQuery的slideUp()方法一章節。
6.slideDown()函數可以參閱jQuery的slideDown()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11817
更多內容可以參閱:http://www.softwhy.com/jquery/
