Html Bootstrap 3 折叠菜单不会在单击时关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21203111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 collapsed menu doesn't close on click
提问by Paranoia
I have a more or less standard navigation from bootstrap 3
我或多或少有一个来自 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>
It collapses normally on smaller devices. Clicking on the menu button expands the menu but if I click (or touch for that matter) on a menu link, the menu stays open. What do I have to do, to close it again?
它通常会在较小的设备上折叠。单击菜单按钮可展开菜单，但如果我单击（或触摸）菜单链接，菜单将保持打开状态。我该怎么办，再次关闭它？
采纳答案by VCNinc
Bootstrap's default setting is to keep the menu open when you click on a menu item. You can manually override this behaviour by calling .collapse('hide');on the jQuery element that you want to collapse.
Bootstrap 的默认设置是在您单击菜单项时保持菜单打开。您可以通过调用.collapse('hide');要折叠的 jQuery 元素来手动覆盖此行为。
回答by Kevin Nelson
Just to share this from solutions on GitHub, this was the popular answer:
只是为了从 GitHub 上的解决方案中分享这一点，这是流行的答案：
https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247
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');
}
});
This is wired to the document, so you don't have to do it on ready() (you can dynamically append links to your menu and it will still work), and it only gets called if the menu is already expanded. Some people have reported weird flashing where the menu opens and then immediately closes with other code that did not verify that the menu had the "in" class.
这是连接到文档的，因此您不必在 ready() 上执行此操作（您可以动态地将链接附加到菜单并且它仍然可以工作），并且只有在菜单已经展开时才会调用它。有些人报告说菜单打开时出现奇怪的闪烁，然后立即关闭，其他代码没有验证菜单是否具有“in”类。
[UPDATE 2014-11-04] apparently when using sub-menus, the above can cause problems, so the above got modified to:
[更新 2014-11-04] 显然在使用子菜单时，上述内容可能会导致问题，因此将上述内容修改为：
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a:not(".dropdown-toggle")') ) {
$(this).collapse('hide');
}
});
回答by FullStackDev
Change this:
改变这个：
<li><a href="#one">One</a></li>
to this:
对此：
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>
This simple change worked for me.
这个简单的改变对我有用。
回答by raisercostin
I had the same problem but caused by including twicebootstrap.jsand jquery.jsfiles.
我有同样的问题，但由于包含两次bootstrap.js和jquery.js文件。
On a single click the event was processed twice by both jquery instances. One closed and one opened the toggle.
单击一次，两个 jquery 实例都会处理该事件两次。一个关闭，一个打开切换。
回答by Chakradhar Vyza
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
});
This would help in handling drop down in nav bar
这将有助于处理导航栏中的下拉
回答by Paul
I am having/had similar issues with Bootstrap 4, alpha-6, and Joakim Johanssons answer above started me in the right direction. No javascript required. Putting data-target=".navbar-collapse" and data-toggle="collapse" into the div tag inside the nav, but surrounding the links/buttons, worked for me.
我在 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>回答by Syed
I know this question is for Bootstrap 3but if you are looking solution for Bootstrap 4, just do this:
我知道这个问题是针对Bootstrap 3 的，但是如果您正在寻找Bootstrap 4 的解决方案，请执行以下操作：
$(document).on('click','.navbar-collapse.show',function(e) {
$(this).collapse('hide');
});
回答by Densol
I had the same problem, I was using jQuery-1.7.1and bootstrap 3.2.0.
I changed my jQuery version to the latest (jquery-1.11.2) version and everything works well.
我有同样的问题，我正在使用jQuery-1.7.1和bootstrap 3.2.0。我将我的 jQuery 版本更改为最新的 ( jquery-1.11.2) 版本，并且一切正常。
回答by weaveoftheride
I did
我做了
$(".navbar-toggle").click(function(event) {
$(".navbar-collapse").toggle('in');
});
回答by Wim Van Houts
Though the solution posted earlier to change the menu item itself, like below, works when the menu is on a small device, it has a side effect when the menu is on full width and expanded, this can result in a horizontal scrollbar sliding over your menu items. The javascript solutions do not have this side-effect.
尽管之前发布的更改菜单项本身的解决方案（如下所示）在菜单位于小型设备上时有效，但当菜单处于全宽并展开时会产生副作用，这可能会导致水平滚动条在您的屏幕上滑动菜单项。javascript 解决方案没有这种副作用。
<li><a href="#one">One</a></li> to
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>
(sorry for answering like this, wanted to add a comment to that answer, but, seems I haven't sufficient credit to make remarks )
（很抱歉这样回答，想为该答案添加评论，但是，似乎我没有足够的信用来发表评论）
