jquery - Bootstrap 嵌套导航栏

Question

如何在 Bootstrap 3 中构建嵌套导航栏？

This fiddle非常接近我想要的，除了我希望辅助选项卡始终可见。在 fiddle 中，一切都是切换。 另外，我想使用 navbar-inverse，但是在 fiddle 中，如果我从 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"> block 时，导航栏将显示在狭窄的屏幕上。在这种情况下，您必须替换 $('.collapse').click(function () {通过$('.navbar-nav').click(function () { .

结果可能是这样的:http://jsfiddle.net/glebkema/q98mtbj5/

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

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

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