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

Bootstrap two responsive menus - collapse one menu when the other menu-button is clicked

本文关键字：菜单 按钮 折叠 另一个 一个 两个 响应 单击      更新时间：2023-11-29

有两个搜索容器：

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

当点击另一个菜单时，是否可以（以及如何）隐藏一个菜单（如果打开），从而打开第二个菜单？

目前，当导航栏菜单打开，我要打开另一个菜单时，所有两个菜单都打开了。。。你知道我的意思吗？

谢谢：）

我认为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>

您需要为下拉菜单使用唯一的类或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>

您可以使用Bootstrap中已有的方法.colappse（）来隐藏未涉及的菜单。

将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'); });
});
相关文章：