bootstrap一度に複数のnavアイテムを開く

Question

私は、複数のナビゲーションをブートストラップ3を使用して動作させようとしています。現在、最初のメニュー（クリックした左側のバーガーメニュー - 添付の画像を参照してください）メニュー項目。次のクリックですべての項目が閉じられると、その後のクリックは、一度に1つのメニュー項目が開いているように動作します。

<div class="navbar navbar-inverse navbar-fixed-top" id="#navGroup"> 
    <div class="container"> 
     <div class="row" id="navGroup"> 
      <div class="navbar-header col-xs-4"> 
       <button type="button" class="navbar-toggle navbar-left" data-toggle="collapse" data-target=".burger-collapse" data-parent="#navGroup"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="navbar-header col-xs-4"> 
       <a class="navbar-brand" href='@Url.Action("Home", "Home")'> 
       <i class="glyphicon glyphicon-home logo-glyph"></i> 
       </a> 
      </div> 
      <div class="navbar-header col-xs-4"> 
       <button class="navbar-toggle glyphicon air-listing-nav glyphicon-user" data-toggle="collapse" data-target=".profile-collapse" data-parent="#navGroup"></button> 
       <button class="navbar-toggle glyphicon air-listing-nav glyphicon-bell" data-toggle="collapse" data-target=".notifications-collapse" data-parent="#navGroup"></button> 
       <button class="navbar-toggle glyphicon air-listing-nav glyphicon-question-sign" data-toggle="collapse" data-target=".help-collapse" data-parent="#navGroup"></button> 
      </div> 
     </div> 
     <div class="navbar-collapse collapse burger-collapse"> 
      <ul class="nav navbar-nav"> 
       <li>@Html.ActionLink("Home", "Home", "Home")</li> 
       <li>@Html.ActionLink("Profile", "Profile", "Profile")</li> 
      </ul> 
     </div> 
     <div class="navbar-collapse collapse navbar-right profile-collapse"> 
      <ul class="nav navbar-nav"> 
       <li>@Html.ActionLink("Profile", "Profile", "Profile")</li> 
       <li>@Html.ActionLink("Settings", "Settings", "ManageSettings")</li> 
      </ul> 
     </div> 
     <div class="navbar-collapse collapse navbar-right notifications-collapse"> 
      <ul class="nav navbar-nav"> 
       <li>@Html.ActionLink("Notifications", " ", "Profile")</li> 
      </ul> 
     </div> 
     <div class="navbar-collapse collapse navbar-right help-collapse"> 
      <ul class="nav navbar-nav"> 
       <li>@Html.ActionLink("Help", " ", "Profile")</li> 
      </ul> 
     </div> 
    </div> 
</div> 

JS：

<script>  
    $(function() { 
     $(document).click(function (event) { 
      $('.navbar-collapse').collapse('hide'); 
     }); 
    }); 
</script> 

添付画像

（メニューが正しく動作された後、私はスタイルにうまくいく、今のスタイリングの問題を無視してください）

ナビゲーションItens定休：

オープン

をクリックバーガーメニューとすべてのナビゲーション項目は、私はどこでも検索した

一度に開いてちょうど1つのメニューを持っているべき私のために働く答えは見つけられません。私は&他の場所で提案されているようにデータの親を使用しています。

ご協力いただければ幸いです。

Answer 1

私はあなたがこの例に基づいて自分自身でそれを簡略化することができると思います。実際にはdropdown example

：

.navbar-brand-centered { 
 
    position: absolute; 
 
    left: 50%; 
 
    width: 160px; 
 
    text-align: center; 
 
} 
 
.navbar>.container .navbar-brand-centered { 
 
    margin-left: -80px!important; 
 
} 
 

 
.navbar-nav>li, .navbar-nav{ 
 
    float: left !important; 
 
} 
 

 
.navbar-right { 
 
    float: right !important; 
 
} 
 

 
.nav.navbar-nav .dropdown { 
 
    width: 48px; 
 
    position: relative; 
 
} 
 

 
.nav.navbar-nav { 
 
    margin: 0; 
 
} 
 

 
.nav.navbar-nav>li>a { 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
} 
 

 
.nav.navbar-nav .dropdown.open .dropdown-menu li a:hover { 
 
    color: #262626; 
 
    text-decoration: none; 
 
    background-color: #f5f5f5; 
 
} 
 

 
.nav.navbar-nav .dropdown ul { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    float: left; 
 
    background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    border: 1px solid rgba(0,0,0,.15); 
 
    background-clip: padding-box; 
 
    box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px; 
 
    
 
} 
 

 
.nav.navbar-nav.navbar-right .dropdown ul { 
 
    right: 0; 
 
    left: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<div class="my-example"> 
 
    <nav id="myNavbar" class="navbar navbar-inverse navbar-toggleable navbar-fixed-top" role="navigation"> 
 
     <div class="container"> 
 
      
 
      <div class="navbar-header"> 
 
       <div class="navbar-brand navbar-brand-centered"> 
 
       <a href="#"> <i class="fa fa-lg fa-home"></i> </a> 
 
       </div> 
 
      </div> 
 
      
 
      <!--first burger like dropdown--> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="dropdown"> 
 
        <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-lg fa-bars"></i> </a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Item</a></li> 
 
         <li><a href="#">Item</a></li> 
 
         <li><a href="#">Item</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 

 
      <!--group of 3 icon dropdowns--> 
 
      <ul class="nav navbar-nav navbar-right"> 
 

 
       <li class="dropdown"> 
 
        <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-question"></i> </a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Item</a></li> 
 
         <li><a href="#">Item</a></li> 
 
         <li><a href="#">Item</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="dropdown"> 
 
        <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-bell"></i> </a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Item</a></li> 
 
         <li><a href="#">Item</a></li> 
 
         <li><a href="#">Item</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="dropdown"> 
 
        <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-user"></i> </a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Item</a></li> 
 
         <li><a href="#">Item</a></li> 
 
         <li><a href="#">Item</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
</div>

そして、あなたがそのスクリプトを必要とする理由私はわかりませんボトム。

編集：