Bootstrap два реагирующее меню - свертывание одно меню, когда другое меню нажимается кнопка

Question

Есть два поисковых-контейнеры:

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

Кнопка Чтобы свернуть контейнеры:

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

это возможно (и как), чтобы скрыть одно меню (если оно открыто), когда нажимается другое меню - и так открыть второе меню?

В настоящее время, когда navbarMenu открыт, и я собираюсь открыть другое меню, все два меню открыты ... Вы знаете, что я имею в виду?

Спасибо :)

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

Вам необходимо дифференцировать данные, целевой атрибут с уникальным идентификатором класса или для раскрывающихся меню следующим образом:

Для первого меню

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

Для ваше второе меню:

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

Тогда вы можете добавить этот уникальный идентификатор к своему nav co llapse контейнер:

Первый

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

Второй

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

Answer 3

Вы можете использовать метод .collapse() уже имеющийся в Bootstrap, чтобы скрыть меню не участвует.

Обновление 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'); }); 
});