Twitter bootstrap Twitter引导：多个响应可折叠导航？

我正在使用Twitter引导。我希望有两个（或更多）导航，当在移动设备上查看时，可以折叠成下拉列表

这可以很容易地在一个页面上完成一次，但我不知道如何拥有多个响应/可折叠导航

此代码用于创建一个在移动设备上折叠的导航：

<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个或更多响应导航功能？

您的思路是正确的

.nav collapse

由引导程序在内部使用，以实际响应地进行导航折叠。不要使用

.nav-collapse2

作为

数据目标

，而是使用您自己的类/id（除了使用

.nav-collapse2

）

下面是一个例子：

<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>

---

这是一个。

我一开始就和@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');
    }
  });
});

---

伟大的据我所知，文档中缺少这条信息。如果您同时单击两个按钮，则两个菜单将同时出现。点击一个按钮不会让其他人崩溃你的回答帮我省了几个小时，谢谢！