使用Bootstrap class list-group的響應式可摺疊菜單

Question

我正在嘗試爲我的網站製作一個非常簡單，快速加載，易於閱讀和響應式設計。我正在使用Bootstrap的list-group類作爲左手導航，我一直無法找到一種方法來爲移動設備/較小的設備製作可摺疊的應用程序。另外，當我減少屏幕太多時，我的頂級導航消失。我應該放棄設計並重新開始嗎？除了缺乏移動兼容性之外，我對它一般感到滿意。

http://www.taniarascia.com/acordeondeteclas

這是我第一次嘗試使用這樣的求助，任何反饋，將不勝感激。

<div class="list-group"> 
<a href="intro.html" class="list-group-item">The Basics</a> 

是我做左手導航的方式。

Answer 1

您的菜單：

<div id="sidebar" class="list-group"> 
    <a class="list-group-item collapse-toggle head1">Learn Piano Accordion</a> 
    <div id="menu" class="hidden-tablet collapse"> 
     <a class="list-group-item" href="intro.html">The Basics</a> 
     <a class="list-group-item" href="types.html">Types of Accordions</a> 
     <a class="list-group-item" href="musictheory.html">Music Theory</a> 
     <a class="list-group-item" href="scales.html">Scales, Thirds and Sixths</a> 
     <a class="list-group-item" href="chords.html">Major, Minor and 7th Chords</a> 
     <a class="list-group-item" href="keys.html">Keys and Chord Progressions</a> 
     <a class="list-group-item" href="tutorials.html">Tutorials</a> 
     <a class="list-group-item" href="adornos.html">Adornos</a> 
     <a class="list-group-item" href="basses.html">Basses</a> 
     <a class="list-group-item" href="bands.html">Bands with Piano Accordion</a> 
     <a class="list-group-item" href="misc.html">Miscellaneous</a> 
    </div> 
</div> 

JS

$('.collapse-toggle').on('click', function(){ 
    $('#menu').collapse('toggle'); 
}); 

Fiddle

UPDATE： 要使用移動設備時，你可以添加一個jQuery函數來檢查的實際隱藏菜單屏幕大小，並在低於X時執行操作（在本例中爲480）。

JS：

$(window).on('resize', function(){ 
    var windowSize = $(window).width(); 
    if(windowSize < 480) { 
     $('#menu').collapse('hide'); 
    } else { 
     $('#menu').collapse('show'); 
    } 
}); 

Fiddle Updated