4

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

4

2 回答 2

10

You're on the right track.

.nav-collapse is used internally by bootstrap to actually make the navigation collapse responsively. Instead of using .nav-collapse2 as a data-target, use your own class/id (in addition to using .nav-collapse)

Here's an example:

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

Here's a fiddle.

于 2013-02-14T05:04:17.417 回答
0

我一开始和@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');
    }
  });
});
于 2014-08-28T14:37:57.390 回答