在第1页上带有汉堡菜单的多个导航栏

Question

我在页面上有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> 

我找不到这个在谷歌任何东西。

Answer 1

target =“＃navbar_main”as id =“navbar_main”在移动潜水员工作的基础上正常工作。

看到演示

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