jquery - jQuery 多个简单 Rail 菜单（不嵌套 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级了。我正在编写一些代码，但我不知道这个想法更好。怎样才能更短的编写这段代码？谢谢大家。对不起我的英语不好 ：）

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/