写在前面的话：
项目需要，三级左菜单，替换原来的二级。改起来嫌麻烦就去 懒人之家 找了一个借鉴一下。左菜单需要“限高”，太长了不好看，所以要求点开一个的同时要让其他都闭合。
以下做了些许尝试，最终，发现了siblings的功效，删繁就简，特地来这里做一下记录。
他们的素材只是提供了框框方法，如何自己使用，还需要自己修改~
so~放个对比图：
修改部分，代码如下：
1 $('.active').click(function(){ 2 3 $(this).parent().siblings().children('a').removeClass('inactives'); 4 $(this).parents('li').siblings('li').children('ul').slideUp(500); 5 })
active类是二级菜单，当它被点击时，其他二级菜单收起。 其中 inactives指展开状态。
修改后的全部代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery可展开收缩三级下拉菜单代码 - 站长素材</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0} 8 body{font-size: 12px;font-family: "宋体","微软雅黑";} 9 ul,li{list-style: none;} 10 a:link,a:visited{text-decoration: none;} 11 .left{border-bottom:solid 1px #316a91;width: 240px; float: left; height:100%;position:absolute;top:0;left:0; overflow:auto; background-color: #f5f5f5;} 12 .left ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;} 13 .left ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative; 14 } 15 .left ul li .inactive{ background:url(images/jiantou1.png) no-repeat 184px center;} 16 .left ul li .inactives{background:url(images/jiantou.png) no-repeat 184px center;} 17 .left ul li ul{display: none;} 18 .left ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;} 19 .left ul li ul li ul{display: none;} 20 .left ul li ul li a{ padding-left:20px;} 21 .left ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; } 22 .last{ background-color:#d6e6f1; border-color:#6196bb; } 23 .left ul li ul li ul li a{ color:#316a91; padding-left:30px;} 24 </style> 25 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 26 <script type="text/javascript"> 27 $(document).ready(function() { 28 $('.inactive').click(function(){ 29 if($(this).siblings('ul').css('display')=='none'){ 30 $(this).parent('li').siblings('li').removeClass('inactives'); 31 $(this).addClass('inactives'); 32 $(this).siblings('ul').slideDown(500).children('li'); 33 if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){ 34 $(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives'); 35 $(this).parents('li').siblings('li').children('ul').slideUp(500); 36 37 } 38 }else{ 39 //控制自身变成+号 40 $(this).removeClass('inactives'); 41 //控制自身菜单下子菜单隐藏 42 $(this).siblings('ul').slideUp(500); 43 //控制自身子菜单变成+号 44 $(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives'); 45 //控制自身菜单下子菜单隐藏 46 $(this).siblings('ul').children('li').children('ul').slideUp(500); 47 48 //控制同级菜单只保持一个是展开的（-号显示） 49 $(this).siblings('ul').children('li').children('a').removeClass('inactives'); 50 if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){ 51 $(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives'); 52 $(this).parents('li').siblings('li').children('ul').slideUp(500); 53 54 } 55 } 56 }) 57 $('.active').click(function(){ 58 59 $(this).parent().siblings().children('a').removeClass('inactives'); 60 $(this).parents('li').siblings('li').children('ul').slideUp(500); 61 }) 62 }); 63 </script> 64 </head> 65 <body> 66 <div class="left"> 67 <ul class="yiji"> 68 <li><a href="#">中国美协章程</a></li> 69 <li><a href="#" class="inactive">团体会员</a> 70 <ul style="display: none"> 71 <li><a href="#" class="inactive active">美协机关</a> 72 <ul> 73 <li><a href="#">办公室</a></li> 74 <li><a href="#">人事处</a></li> 75 <li><a href="#">组联部</a></li> 76 <li><a href="#">外联部</a></li> 77 <li><a href="#">研究部</a></li> 78 <li><a href="#">维权办</a></li> 79 </ul> 80 </li> 81 <li class="last"><a href="#">《美术》杂志社</a></li> 82 </ul> 83 </li> 84 <li><a href="#" class="inactive">组织机构</a> 85 <ul style="display: none"> 86 <li><a href="#" class="inactive active">美协机关</a> 87 <ul> 88 <li><a href="#">办公室</a></li> 89 <li><a href="#">人事处</a></li> 90 <li><a href="#">组联部</a></li> 91 <li><a href="#">外联部</a></li> 92 <li><a href="#">研究部</a></li> 93 <li><a href="#">维权办</a></li> 94 </ul> 95 </li> 96 <li><a href="#" class="inactive active">中国文联美术艺术中心</a> 97 <ul> 98 <li><a href="#">综合部</a></li> 99 <li><a href="#">大型活动部</a></li> 100 <li><a href="#">展览部</a></li> 101 <li><a href="#">艺委会工作部</a></li> 102 <li><a href="#">信息资源部</a></li> 103 <li><a href="#">双年展办公室</a></li> 104 </ul> 105 </li> 106 <li class="last"><a href="#">《美术》杂志社</a></li> 107 </ul> 108 </li> 109 </ul> 110 </div> 111 </body> 112 </html>
原代码->传送门