引导两个响应菜单-单击另一个菜单按钮时折叠一个菜单

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

我认为由click（）事件触发的toggleClass（）是您所追求的。

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

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

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

对于第二个菜单：

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

然后，您可以将该唯一ID添加到导航折叠容器中：

第一

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

第二

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

Answer 3

您可以使用Bootstrap中已经可用的.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'); });
});