響應式多級菜單

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顯示在CSS設置爲none。

在@media screen and (max-width: 600px)改變顯示器塊：

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

Answer 2

看來只有導航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; 
      }); 

編輯

以上只是告訴你爲什麼你的幻燈片切換不工作的最低要求。如果你想解決更廣義/更好的，你應該這樣做，而不是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 

我覺得很奇怪，在相同的菜單混合下拉菜單和手風琴。