Twitter Bootstrap：多个响应式可折叠导航？

Posted 2023-04-13

【中文标题】Twitter Bootstrap：多个响应式可折叠导航？

【英文标题】：Twitter Bootstrap: Multiple responsive collapsable navs?

【发布时间】：2013-01-29 19:40:54

【问题描述】：

我正在使用 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 个或更多响应式导航的功能？

【参考方案1】：

你在正确的轨道上。

.nav-collapse 由引导程序在内部使用，以实际使导航响应折叠。不要使用.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。

【讨论】：

太棒了！据我所知，文档中缺少这条信息。

如果您同时单击两个按钮，您将获得两个菜单。单击按钮时不会折叠其他人

你的回答为我节省了几个小时，谢谢！

【参考方案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');
    
  );
);