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适合所有人。抱歉我的英文：）

enter image description here

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/

jQuery多个简单轨道菜单（不是嵌套的ul）

1 个答案: