0

私の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");
    });
});

クリックしてリンクするときは、アクティブなリンク (色、背景) を表示する必要があります。(イージング メニュー効果あり) 次の深度メニュー ul を開きます。3レベルになりました。私はいくつかのコードを書いていますが、これに適したアイデアはわかりません。このコードをどのように短く書くことができますか? みんなのthnx。私の英語でごめんなさい:)

ここに画像の説明を入力

jsFiddle デモ

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

4

1 に答える 1

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/

于 2013-11-10T13:48:38.057 に答える