ブートストラップ2つの応答メニュー - 他のメニューボタンがクリックされた崩壊1つのメニュー

Question

2つの検索コンテナがあります

：

<button class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarSearch" </button> 
<button class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarMenu" </button> 

はそれが可能です：このコンテナを折りたたむために

<div id="navbarSearch" class="navbar-collapse collapse np-mobile-menu"></div> 
<div id="navbarMenu" class="navbar-collapse collapse np-mobile-menu"></div> 

ボタンが他のメニューがクリックされたときに、あるメニューを隠す（開いている場合）ように（そして、どうすれば）、2番目のメニューを開きますか？

現在、navbarMenuが開いているときに、もう1つのメニューを開くつもりがありますが、2つのメニューはすべて開いています。

ありがとうございました:)

Answer 1

私はtoggleClass（）クリック（）イベントによってトリガと思うあなたが後にしているものです。

• https://api.jquery.com/click/
• http://api.jquery.com/toggleclass/

$(document).ready(function() { 
 
\t $(".navbarSearch_button").click(function() { 
 
\t \t //alert("Handler for button_1 called."); 
 
\t \t $("#navbarSearch").toggleClass("navbar-collapse collapse") 
 
\t }); 
 
\t 
 
\t $(".navbarMenu_button").click(function() { 
 
\t \t //alert("Handler for navbarMenu_button called."); 
 
\t \t $("#navbarMenu").toggleClass("navbar-collapse collapse") 
 
\t }); 
 
}); \t

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navbarSearch" class="navbar-collapse collapse np-mobile-menu">lala</div> 
 
<div id="navbarMenu" class="navbar-collapse collapse np-mobile-menu">mama</div> 
 

 
<button class="b1 navbarSearch_button">navbarSearch</button> 
 
<button class="b1 navbarMenu_button" >navbarMenu</button>

Answer 2

をあなたがそうのようなあなたのドロップダウンメニューのためのユニークなクラスやIDを使用してデータ・ターゲット属性を区別する必要がありますについては、あなたの最初のメニューについては

<a class="btn btn-navbar" data-toggle="collapse" data-target="#first"> 

をあなたの2番目のメニュー：

<a class="btn btn-navbar" data-toggle="collapse" data-target="#second"> 

次に、そのユニークなIDをあなたのnav co llapseコンテナ：

まず

<div id="first" class="nav-collapse"> ... </div> 

セカンド

<div id="second" class="nav-collapse"> ... </div> 

Answer 3

あなたは関与していないメニューを非表示にするブートストラップですでに利用可能）（メソッドの.collapseを使用することができます。これに

更新htmlコード：

<div id="navbarSearch" class="navbar-collapse collapse np-mobile-menu"></div> 
<div id="navbarMenu" class="navbar-collapse collapse np-mobile-menu"></div> 

<button id="navbarSearchButton" class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarSearch"></button> 
<button id="navbarMenuButton" class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarMenu"></button> 

が続いて別のファイルにjsのコードを追加します。私が持っているものだ

$(function() 
{ 
    $('#navbarSearchButton').on ('click', function() { $('#navbarMenu').collapse('hide'); }); 
    $('#navbarMenuButton').on ('click', function() { $('#navbarSearch').collapse('hide'); }); 
});