Par*_*oia 119 html css navigation twitter-bootstrap
我有一个或多或少来自bootstrap 3的标准导航
<body data-spy="scroll" data-target=".navbar-collapse">
<!-- ---------- Navigation ---------- -->
<div class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="index.html"> <img src="#"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
</ul>
</div>
</div>
</div>
它在较小的设备上正常崩溃.单击菜单按钮可以展开菜单,但如果我在菜单链接上单击(或触摸),菜单将保持打开状态.我该怎么办,再次关闭它？
Kev*_*son 133
只是为了在GitHub上的解决方案中分享这个,这是最受欢迎的答案:
https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});
这是连接到文档,因此您不必在ready()上执行此操作(您可以动态地将链接附加到菜单,它仍然可以工作),并且只有在菜单已经展开时才会调用它.有些人报告了菜单打开时出现的奇怪闪烁,然后立即关闭了其他代码,这些代码没有验证菜单是否具有"in"类.
[UPDATE 2014-11-04]显然在使用子菜单时,上面会引起问题,所以上面修改为:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a:not(".dropdown-toggle")') ) {
$(this).collapse('hide');
}
});
小智 122
改变这个:
<li><a href="#one">One</a></li>
对此:
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>
这个简单的改变对我有用.
参考:https://github.com/twbs/bootstrap/issues/9013
rai*_*tin 52
我有同样的问题,但由于包含两次 bootstrap.js和jquery.js文件引起的.
只需单击一次,两个jquery实例就会处理两次事件.一个关闭,一个打开了切换.
VCN*_*inc 47
Bootstrap的默认设置是在单击菜单项时保持菜单打开.您可以通过调用.collapse('hide');要折叠的jQuery元素来手动覆盖此行为.
小智 17
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
});
这有助于处理导航栏中的下拉菜单
小智 10
我与Bootstrap 4,alpha-6有类似的问题,Joakim Johansson的回答让我开始朝着正确的方向前进.不需要JavaScript.将data-target =".navbar-collapse"和data-toggle ="collapse"放入导航内的div标签,但围绕链接/按钮,对我有用.
<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
<a class="nav-item nav-link" href="#">Menu Item 1</a>
...
</div>我知道这个问题是针对Bootstrap 3的,但如果您正在寻找Bootstrap 4的解决方案,请执行以下操作:
$(document).on('click','.navbar-collapse.show',function(e) {
$(this).collapse('hide');
});
我做到了
$(".navbar-toggle").click(function(event) {
$(".navbar-collapse").toggle('in');
});