Bootstrap嵌套导航栏

Question

如何在Bootstrap 3中构建嵌套的navbars？

This fiddle非常接近我想要的，除了我希望辅助标签始终可见。在小提琴中，一切都是切换。 另外我想使用navbar-inverse，但是如果我从navbar-default更改为navbar-inverse，则在小提琴中，菜单不再有效！

下面我已经包含了一些近似我想要的代码。单击主页时应显示第二个菜单，选择页面1时应显示第三个菜单，依此类推。

可以这样做吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#nav1">Home</a></li>
      <li><a href="#nav2">Page 1</a></li>
      <li><a href="#2">Page 2</a></li> 
      <li><a href="#3">Page 3</a></li> 
    </ul>
  </div>
</nav>

<nav id="nav1" class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home1</a></li>
      <li><a href="#">Page 12</a></li>
      <li><a href="#">Page 22</a></li> 
      <li><a href="#">Page 32</a></li> 
    </ul>
  </div>
</nav>

<nav id="nav2" class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home3</a></li>
      <li><a href="#">Page 13</a></li>
      <li><a href="#">Page 23</a></li> 
      <li><a href="#">Page 33</a></li> 
    </ul>
  </div>
</nav>

Answer 1

1。 .navbar-inverse类

如果您已将navbar-default类替换为navbar-inverse，那么请不要忘记在您的javascript中替换相同的类。使用

$(".navbar-inverse .in").removeClass("in").addClass("collapse");

而不是

$(".navbar-default .in").removeClass("in").addClass("collapse");

2。 .collapse('hide')方法

Bootstrap对于可折叠项目有useful methods。您可以使用.collapse('hide')代替.removeClass("in").addClass("collapse")。

3。始终可见

如果您将导航栏放入<div class="navbar-header">块，则会在狭窄的屏幕上看到导航栏。在这种情况下，您必须将$('.collapse').click(function () {替换为$('.navbar-nav').click(function () {。

结果可能如下：http://jsfiddle.net/glebkema/q98mtbj5/

＆＃13;

＆＃13;

$('.navbar-nav').click(function () {
    $('.navbar-inverse .in').collapse('hide');
});

$('.navbar-toggle').click(function () {
    $('.childMenu.in').collapse('hide');
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="navbar navbar-default navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse.parentMenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap 3.0 Skeleton</a>
      <ul class="nav navbar-nav pull-left">
        <li><a data-toggle="collapse" data-target=".navbar-collapse1">Sub Menu  1</a></li>
      </ul>
    </div>

    <div class="collapse navbar-collapse parentMenu">
      <ul class="nav navbar-nav">
        <li><a data-toggle="collapse" data-target=".navbar-collapse2">Sub Menu  2</a></li>
        <li><a data-toggle="collapse" data-target=".navbar-collapse3">Sub Menu  3</a></li>
      </ul>
    </div>

    <div class="collapse navbar-collapse1 childMenu">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home 1</a></li>
        <li><a href="#about">About 1</a></li>
        <li><a href="#contact">Contact 1</a></li>
      </ul>
    </div>
    <div class="collapse navbar-collapse2 childMenu">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home 2</a></li>
        <li><a href="#about">About 2</a></li>
        <li><a href="#contact">Contact 2</a></li>
      </ul>
    </div>
    <div class="collapse navbar-collapse3 childMenu">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home 3</a></li>
        <li><a href="#about">About 3</a></li>
        <li><a href="#contact">Contact 3</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;padding:2px 20px;'>
  Fork this at the <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a>
<div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;