Bootstrap 嵌套导航栏
Bootstrap Nested Navbars
如何在 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>
1。 .navbar-inverseclass
如果您已将 navbar-default class 替换为 navbar-inverse，那么请不要忘记在您的 javascript 处替换相同的 class。使用
$(".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/
$('.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>
如何在 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>
1。 .navbar-inverseclass
如果您已将 navbar-default class 替换为 navbar-inverse，那么请不要忘记在您的 javascript 处替换相同的 class。使用
$(".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/
$('.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>