Отзывчивое многоуровневое меню

Question

Я пытался создать многоуровневое меню стиля адаптивного аккордеона с деталями из различных уроков. Проблема, с которой я сталкиваюсь, заключается в использовании slideToggle во вторичном списке в отзывчивом представлении, ничего похожего не происходит, и я не вижу никаких консольных ошибок.

Я создал JS скрипку, так что вы можете легко смотреть на него здесь: JS Fiddle

Любая помощь по этому вопросу очень ценится, спасибо.

HTML

<nav class="clearfix"> 
    <a href="#" id="pull">Menu</a> 
    <ul class="clearfix" id="TopLevel-List"> 
     <li><a href="#" id="trigger_Nested-0">Nav 1</a> 
      <ul class="clearfix" id="Nested-0"> 
       <li><a href="#">Ad Hoc</a></li> 
       <li><a href="#">Drill Down</a></li> 
       <li><a href="#">Ranking Report</a></li> 
      </ul>  
     </li> 
     <li><a href="#">Nav 2</a></li> 
     <li><a href="#">Nav 3</a> 
      <ul> 
       <li><a href="#" >Ad Hoc</a></li> 
       <li><a href="#">Drill Down</a></li> 
       <li><a href="#">Ranking Report</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Nav 4</a> 
      <ul> 
       <li><a href="#" >Ad Hoc</a></li> 
       <li><a href="#">Drill Down</a></li> 
       <li><a href="#">Ranking Report</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Nav 5</a></li> 
     <li><a href="#">Nav 6</a></li> 
    </ul> 
</nav> 

JQuery

$(function() { 
    var pull = $('#pull'); 
    menu  = $('nav ul'); 
    menuHeight = menu.height(); 

    $(pull).on('click', function(e) { 
     e.preventDefault(); 
     menu.slideToggle(); 
    }); 

    $(window).resize(function(){ 
     var w = $(window).width(); 
     if(w > 320 && menu.is(':hidden')) { 
      menu.removeAttr('style'); 
     } 
    }); 
}); 

$(function(){ 
    $("ul[id|=Nested]").hide(); 

    $("a[id|=trigger_Nested]").click(function() { 
     $(this).siblings("ul").slideToggle("fast"); 
     return false; 
    }); 
}); 

Answer 1

скрипку: http://jsfiddle.net/X88vM/3/

Причина ничего не происходит, что у вас есть li дисплей установлен в none в CSS.

При @media screen and (max-width: 600px) изменения изображения на дисплей блок:

nav li ul li { 
      display: block; 
      height: auto;         
      margin: 0; 
      padding: 0; 
      width:100px;      
    } 

Answer 2

Это только кажется, Nav 1 должен был иметь раздвижную поведение так, я сосредоточился на том.

Он ничего не сделал, потому что li был установлен в display:none. Сам ul имел высоту ноль в результате этого, и когда вы переключаете слайд, он будет скользить на и с высоты нуля, которая ничего не делает.

http://jsfiddle.net/X88vM/2/

Я добавил строку, чтобы показать li когда ul предполагается расширить.

  $("a[id|=trigger_Nested]").click(function() { 
      $(this).siblings ('ul').find ('li').show(); //this line i added 
      $(this).siblings("ul").slideToggle("fast"); 

      return false; 
      }); 

EDIT

Выше было просто показать вам голый минимум почему слайд тумблер не работает. Если вы хотите, чтобы решение было более обобщенным/лучше вы должны делать это вместо http://jsfiddle.net/X88vM/4/:

 nav li ul li { 
      /*display: none;*/ //comment out this line 
      height: auto;         
      margin: 0; 
      padding: 0; 
      width:100px;      
    } 

#Nested-0 { //add this new rule 
    display:none; 
} 

и в коде

menu  = $('#TopLevel-List'); //change to this selector instead 

Я нахожу это странным смешать выпадающие и аккордеоны в том же меню.