Bootstrap 3 - 帶兩個摺疊菜單的導航欄

如何使用兩個相鄰的導航欄切換菜單？如果我點擊第一個圖標，它會正常打開，但如果我點擊第二個圖標，第一個圖標不會關閉。Bootstrap 3 - 帶兩個摺疊菜單的導航欄

<nav class="navbar-blue" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header navbar-default"> 
       <button type="button" class="navbar-toggle navbar-user" data-toggle="collapse" data-target="#navbar-collapse-2"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <button type="button" class="navbar-toggle navbar-menu" data-toggle="collapse" data-target="#navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <a class="navbar-brand" href="#"> 
        Logo goes here 
       </a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse navbar-default" id="navbar-collapse-1"> 
       <ul class="nav navbar-nav client-nav navbar-right"> 
        <li> 
         <a class="active" href="#">My Projects</a> 
        </li> 
        <li> 
         <a href="#">Search</a> 
        </li> 
        <li> 
         <a href="#">Post Project</a> 
        </li> 
        <li class="hidden-xs"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-user"></span><span class="fa fa-sort-desc"></span></a> 
         <ul class="dropdown-menu client-dropdown"> 
          <li><a href="#">My Profile</a></li> 
          <li><a href="#">Account Settings</a></li> 
          <li><a href="#">Sign Out</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 

      <!-- User menu to show on screens < 768px --> 
      <div class="collapse navbar-collapse navbar-default" id="navbar-collapse-2"> 
       <ul class="nav navbar-nav client-nav navbar-right"> 
        <li><a href="#">My Profile</a></li> 
        <li><a href="#">Account Settings</a></li> 
        <li><a href="#">Sign Out</a></li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav>

來源

2015-06-26 brunodd

東西在你的提琴改變。按鈕不再顯示。 – gh0st

你確定嗎？這裏似乎沒問題。我已更新以防萬一：https：//jsfiddle.net/brunodd/DTcHh/9264/ – brunodd

我不得不更新引導到最新版本。你的演示使用3.0.0，而3.3.5是最新的。無論如何，根據the documentation from bootstrap's site，您可以通過偵聽show.bs.collapse事件併爲其他菜單觸發.collapse('hide')來實現此目的。

$(function(){ 
    $('.navbar-blue .navbar-collapse').on('show.bs.collapse', function(e) { 
     $('.navbar-blue .navbar-collapse').not(this).collapse('hide'); 
    }); 
});

Demo: Jsfiddle

來源

2015-06-26 16:00:39

哇！謝謝！這工作。 – brunodd

@brunodd不客氣。很高興我能幫上忙。 :) –

Bootstrap 3 - 帶兩個摺疊菜單的導航欄

回答

相關問題