标签：
使用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/
标签：
原文地址：http://www.cnblogs.com/zhadanren/p/5136200.html
