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（）就是你所追求的。

$( 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'); });
});

Bootstrap两个响应式菜单 - 单击另一个菜单按钮时折叠一个菜单

3 个答案: