[英]bootstrap 3 multiple nav items opening at once
I'm trying to get multiple navigations working using bootstrap 3. Currently I have an issue where the first menu clicked (ie the burger menu on the left - see attached images) opens all the menu items. 我正在尝试使用Bootstrap 3进行多种导航。目前,我遇到一个问题,即单击第一个菜单(即左侧的burger菜单-请参阅所附图像)会打开所有菜单项。 The next click closes all the items then subsequent clicks behave as expected with one menu item open at a time.
下次单击将关闭所有项目,随后的单击将按预期方式运行,一次打开一个菜单项。
<div class="navbar navbar-inverse navbar-fixed-top" id="#navGroup">
<div class="container">
<div class="row" id="navGroup">
<div class="navbar-header col-xs-4">
<button type="button" class="navbar-toggle navbar-left" data-toggle="collapse" data-target=".burger-collapse" data-parent="#navGroup">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-header col-xs-4">
<a class="navbar-brand" href='@Url.Action("Home", "Home")'>
<i class="glyphicon glyphicon-home logo-glyph"></i>
</a>
</div>
<div class="navbar-header col-xs-4">
<button class="navbar-toggle glyphicon air-listing-nav glyphicon-user" data-toggle="collapse" data-target=".profile-collapse" data-parent="#navGroup"></button>
<button class="navbar-toggle glyphicon air-listing-nav glyphicon-bell" data-toggle="collapse" data-target=".notifications-collapse" data-parent="#navGroup"></button>
<button class="navbar-toggle glyphicon air-listing-nav glyphicon-question-sign" data-toggle="collapse" data-target=".help-collapse" data-parent="#navGroup"></button>
</div>
</div>
<div class="navbar-collapse collapse burger-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Home", "Home")</li>
<li>@Html.ActionLink("Profile", "Profile", "Profile")</li>
</ul>
</div>
<div class="navbar-collapse collapse navbar-right profile-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Profile", "Profile", "Profile")</li>
<li>@Html.ActionLink("Settings", "Settings", "ManageSettings")</li>
</ul>
</div>
<div class="navbar-collapse collapse navbar-right notifications-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Notifications", " ", "Profile")</li>
</ul>
</div>
<div class="navbar-collapse collapse navbar-right help-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Help", " ", "Profile")</li>
</ul>
</div>
</div>
</div>
JS : JS :
<script>
$(function () {
$(document).click(function (event) {
$('.navbar-collapse').collapse('hide');
});
});
</script>
Attached Images 附加图片
(please ignore styling issues for now, once the menus are working correctly I'll work on styles) (请暂时忽略样式问题,一旦菜单正常工作,我将处理样式)
Nav Itens Closed: Nav Itens已关闭:
Click burger menu and All Nav items open 单击汉堡菜单,然后打开所有导航项目
Should have just one menu open at a time 一次只能打开一个菜单
I've searched everywhere but can't find an answer that works for me. 我到处搜索过,但找不到适合我的答案。 I am using data parent as suggested elsewhere & have unique data-targets for each menu.
我正在其他地方建议使用数据父级,并且每个菜单都有唯一的数据目标。
Any help would be appreciated. 任何帮助,将不胜感激。
I think that you can simplify it for yourself based on this example: dropdown example 我认为您可以根据以下示例自己简化操作: 下拉示例
In practice: 在实践中:
.navbar-brand-centered { position: absolute; left: 50%; width: 160px; text-align: center; } .navbar>.container .navbar-brand-centered { margin-left: -80px!important; } .navbar-nav>li, .navbar-nav{ float: left !important; } .navbar-right { float: right !important; } .nav.navbar-nav .dropdown { width: 48px; position: relative; } .nav.navbar-nav { margin: 0; } .nav.navbar-nav>li>a { padding-top: 15px; padding-bottom: 15px; } .nav.navbar-nav .dropdown.open .dropdown-menu li a:hover { color: #262626; text-decoration: none; background-color: #f5f5f5; } .nav.navbar-nav .dropdown ul { position: absolute; top: 100%; left: 0; float: left; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px; } .nav.navbar-nav.navbar-right .dropdown ul { right: 0; left: auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="my-example"> <nav id="myNavbar" class="navbar navbar-inverse navbar-toggleable navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <div class="navbar-brand navbar-brand-centered"> <a href="#"> <i class="fa fa-lg fa-home"></i> </a> </div> </div> <!--first burger like dropdown--> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-lg fa-bars"></i> </a> <ul class="dropdown-menu"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> </ul> <!--group of 3 icon dropdowns--> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-question"></i> </a> <ul class="dropdown-menu"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-bell"></i> </a> <ul class="dropdown-menu"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-user"></i> </a> <ul class="dropdown-menu"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> </ul> </div> </nav> </div>
And I am not sure why you need that script on the bottom. 而且我不确定为什么您需要在底部使用该脚本。
edit: changed to be more responsive 编辑:更改为更具响应性
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.