Twitter Bootstrap：多個響應式可摺疊導航？

Question

我正在使用Twitter Bootstrap。我想要在移動設備上查看兩個（或更多）導航，並將其合併到下拉菜單中。

這可以很容易地在頁面上完成一次，但我不知道如何有多個響應/可摺疊的導航。

此代碼創建一個導航能在移動崩潰：

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">groups</a> 

<div class="nav-collapse"> 
    <ul class="nav"> 
    <li><a href="#">Nav Link</a></li> 
    <li><a href="#">Nav Link</a></li> 
    <li><a href="#">Nav Link</a></li> 
    <li><a href="#">Nav Link</a></li> 
    </ul> 
</div> 

但我怎麼能做出第二導航？

我嘗試複製此代碼並將data-target=".nav-collapse"更改爲data-target=".nav-collapse2"但這不起作用。

Twitter Bootstrap是否能夠在頁面上擁有2個或更多響應式導航？

Answer 1

你在正確的軌道上。

.nav-collapse被bootstrap內部使用，以實際使導航崩潰響應。而不是使用.nav-collapse2爲data-target的，用自己的類/ ID（除了使用.nav-collapse）

下面是一個例子：

<a class="btn btn-navbar" data-toggle="collapse" data-target=".col1">groups</a> 
<a class="btn btn-navbar" data-toggle="collapse" data-target=".col2">groups2</a> 

<div class="nav-collapse col1"> 
    <ul class="nav"> 
     <li><a href="#">Nav Link</a></li> 
     <li><a href="#">Nav Link</a></li> 
    </ul> 
</div> 
<div class="nav-collapse col2"> 
    <ul class="nav"> 
     <li><a href="#">Nav Link2</a></li> 
     <li><a href="#">Nav Link2</a></li> 
    </ul> 
</div> 

這裏有一個fiddle。

Answer 2

我開始和@ gurch101說的一樣，然後用它來隱藏其他菜單。

// Only show one navigation at a time 
jQuery(function($){ 
    $('.col1').on('show.bs.collapse', function(){ 
    var otherNav = $('.col2'); 
    if (otherNav.is(':visible')) { 
     otherNav.collapse('hide'); 
    } 
    }); 
    $('.col2').on('show.bs.collapse', function(){ 
    var otherNav = $('.col1'); 
    if (otherNav.is(':visible')) { 
     otherNav.collapse('hide'); 
    } 
    }); 
});