jQuery Multiple Simple Rail Menu (не вложенный ul)

Question

jQuery Multiple Simple Rail Menu (не вложенный ul)

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

при нажатии на ссылку необходимо показать активную ссылку (цвет, bg). (с ослаблением эффекта меню) и откройте меню следующей глубины ul. 3 уровня теперь. Я пишу какой-то код, но я не знаю, для чего идея лучше для этого. как можно короче писать этот код? thnx для всех. Извините за мой английский :)

jsFiddle demo

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

gokhan 09 нояб. 2013, в 13:13

Источник

Теги:

jquery

html

css

menu

1 ответ

Ещё вопросы

Joke_Sense10 · Accepted Answer · 2013-11-10T12-24-00.000Z

Попробуй это:

 $(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/

Вы упоминали, что shorter writing this code .. так что я изменил его .. вы ищете что-то конкретное ??
Ваш код при нажатии на глубину 1 меню. закрытая глубина1 и открытая глубина 2 я не хочу закрывать глубину1. для этого сказано.
Проверьте мой обновленный ответ ..
Я хочу что-то короткое и лучшее. но это нравится мой код долго и не лучше. Спасибо за помощь;)
Ваш код не работал в соответствии с вашим требованием .. но это работает .. В любом случае, я постараюсь оптимизировать его.