我的页面上有 2 个导航栏 - 在非移动宽度下工作正常。
顶部有一个汉堡菜单 - 效果很好。
但是,第二个汉堡菜单会激活顶部汉堡菜单。我怎样才能让它激活自己的汉堡菜单?
顶部导航栏:
<nav class="navbar navbar-default navbar-static-top" id="topnavbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">My Dashboard</a>
</li>
<li>
<a href="#">Our Services</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">My Account</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Welcome John</a></li>
</ul>
</div>
</div>
</nav>
下部导航栏:
<nav class="navbar navbar-default" id="midnavbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>
<a href="#">My<br />Favourites</a>
</li>
<li>
<a href="#">Active<br />Funds</a>
</li>
<li>
<a href="#">Passive<br />Funds</a>
</li>
<li>
<a href="#">JJ<br />Funds</a>
</li>
<li>
<a href="#">Fund<br />Ranges</a>
</li>
<li>
<a href="#">Model<br />Portfolios</a>
</li>
<li>
<a href="#">Sector<br />Factsheets</a>
</li>
<li>
<a href="#">Show<br />All</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<button type="submit" class="btn btn-default btnsearch"><i class="glyphicon icon-search"></i></button>
</form>
</li>
</ul>
</div>
</div>
我在 Google 上找不到任何相关信息。
最佳答案
target="#navbar_main"as id="navbar_main"可以在基于 id 的移动潜水中正常工作。
查看演示
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top" id="topnavbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top_navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="top_navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">My Dashboard</a>
</li>
<li>
<a href="#">Our Services</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">My Account</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Welcome John</a></li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-default" id="midnavbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_main"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar_main">
<ul class="nav navbar-nav">
<li>
<a href="#">My<br />Favourites</a>
</li>
<li>
<a href="#">Active<br />Funds</a>
</li>
<li>
<a href="#">Passive<br />Funds</a>
</li>
<li>
<a href="#">JJ<br />Funds</a>
</li>
<li>
<a href="#">Fund<br />Ranges</a>
</li>
<li>
<a href="#">Model<br />Portfolios</a>
</li>
<li>
<a href="#">Sector<br />Factsheets</a>
</li>
<li>
<a href="#">Show<br />All</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form">
<button type="submit" class="btn btn-default btnsearch"><i class="glyphicon icon-search"></i></button>
</form>
</li>
</ul>
</div>
</div>
关于twitter-bootstrap - 一页上有多个带有汉堡菜单的导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30364384/