jQuery的多個簡單鐵路菜單（沒有嵌套UL）

Question

我的CSS

ul{list-style-type:none;} 
a{color:#666;text-decoration:none;outline:none;cursor:pointer;} 
a:hover{color:#000; text-decoration:underline;} 

#navBar>ul>li{line-height:18px; } 
#navBar>ul>li>a{padding:4px 8px} 
#navBar>ul>li.active a{background:#eaeef0; color:#C00} 

.depth0 { width:140px; float:left; height:150px; } 
.depth1 { width:140px; float:left; display:none; } 
.depth2 { float:left; display:none; } 

我的HTML

<div id="navBar"> 
    <ul class="depth0"> 
    <li><a rel="" href="#">menu1</a></li> 
    <li><a rel="c1" href="#">menu2</a></li> 
    <li><a rel="c2" href="#">menu3</a></li> 
    <li><a rel="" href="#">menu4</a></li> 
    </ul> 
    <ul id="c1" class="depth1"> 
    <li><a href="#">menu2a</a></li> 
    <li><a href="#">menu2b</a></li> 
    </ul> 
    <ul id="c2" class="depth1"> 
    <li><a rel="p1" href="#">menu3a</a></li> 
    <li><a rel="p2" href="#">menu3b</a></li> 
    <li><a rel="p3" href="#">menu3c</a></li> 
    <li><a rel="p4" href="#">menu3d</a></li> 
    <li><a rel="p5" href="#">menu3e</a></li> 
    </ul> 
    <ul id="p1" class="depth2"> 
    <li><a href="#">menu3a_1</a></li> 
    <li><a href="#">menu3a_2</a></li> 
    <li><a href="#">menu3a_3</a></li> 
    <li><a href="#">menu3a_4</a></li> 
    <li><a href="#">menu3a_5</a></li> 
    </ul> 
</div> 

jQuery的

$(document).ready(function() { 
    $(".depth0").delegate('a','click',function(){ 
     var id= $(this).attr("rel"); 
     $("#navBar>ul>li").removeClass("active"); 
     $(".depth1, .depth2").hide(); 
     $("#"+id).slideDown(1000,'easeOutExpo'); 
     $(this).parent("li").addClass("active"); 
    }); 

    $(".depth1").delegate('a','click',function(){ 
     var id= $(this).attr("rel"); 
     $(".depth1>li, .depth2>li").removeClass("active"); 
     $(".depth2").hide(); 
     $("#"+id).slideDown(1000,'easeOutExpo'); 
     $(this).parent("li").addClass("active"); 
    }); 
    $(".depth2").delegate('a','click',function(){ 
     $(".depth2>li").removeClass("active"); 
     $(this).parent("li").addClass("active"); 
    }); 
}); 

當點擊鏈接，必須顯示活動鏈接（顏色，BG）。 （使用菜單效果）並打開下一個深度菜單ul。現在有3級了。我正在寫一些代碼，但我不知道這個更好。如何更短的編寫這段代碼？ thnx給大家。對不起，我的英語:)

的jsfiddle演示

http://jsfiddle.net/Hbq7r/2/

Answer 1

試試這個：

$(document).ready(function() { 
$("body").on('click','a',function(){ 
    var id= $(this).attr("rel"); 

    if($(this).html().substr(0,7)=="menu3a_"){ 
    $("#p1").parent().children().eq(3).find("li").removeClass("active"); 
    $(this).parent("li").addClass("active");   
    return false; 
    } 

    if(id.substr(0,1)=="p"){ 
    $("#c2").parent().children().eq(2).find("li").removeClass("active"); 
    $(this).parent("li").addClass("active"); 
    $("#p1").slideDown(1000,'easeOutExpo'); 
     return false; 
    } 

    $(".depth1, .depth2").hide(); 
    $("#navBar>ul>li").removeClass("active"); 
    $(this).parent("li").addClass("active"); 
    if(id){ 
     $("#"+id).slideDown(1000,'easeOutExpo'); 
    } 
}); 

}); 

演示：http://jsfiddle.net/Hbq7r/7/