Javascript Bootstrap 关闭响应式菜单“点击”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14203279/
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 close responsive menu "on click"
提问by user1040259
On "PRODUCTS" click I slide up a white div (as seen in attached). When in responsive (mobile and tablet), I would like to automaticly close the responsive navbar and only show the white bar.
在“产品”上单击我向上滑动一个白色 div（如附件所示）。在响应式（移动设备和平板电脑）中，我想自动关闭响应式导航栏并仅显示白色栏。
I tried:
我试过：
$('.btn-navbar').click();
also tried:
也试过：
$('.nav-collapse').toggle();
And it does work. However in desktop size, it is also called and does something funky to the menu where it shrinks for a second.
它确实有效。然而，在桌面大小中，它也被称为并对菜单进行了一些时髦的操作，它会缩小一秒钟。
Any ideas?
有任何想法吗？
回答by Jake Taylor
You don't have to add any extra javascript to what's already included with bootstraps collapse option. Instead simply include data-toggle and data-target selectors on your menu list items just as you do with your navbar-toggle button. So for your Products menu item it would look like this
您不必向已包含在引导程序折叠选项中的内容添加任何额外的 javascript。相反，只需在菜单列表项中包含数据切换和数据目标选择器，就像使用导航栏切换按钮一样。所以对于您的产品菜单项，它看起来像这样
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Then you would need to repeat the data-toggle and data-target selectors for each menu item
然后您需要为每个菜单项重复数据切换和数据目标选择器
EDIT!!!In order to fix overflow issues and flickering on this fix I'm adding some more code that will fix this and still not have any extra javascript. Here is the new code:
编辑！！！为了修复溢出问题并在此修复程序上闪烁，我添加了更多代码来解决此问题，但仍然没有任何额外的 javascript。这是新代码：
<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Here it is at work http://jsfiddle.net/jaketaylor/84mqazgq/
这是在工作http://jsfiddle.net/jaketaylor/84mqazgq/
This will make your toggle and target selectors specific to screen size and eliminate glitches on the larger menu. If anyone is still having issues with glitches please let me know and I'll find a fix. Thanks
这将使您的切换和目标选择器特定于屏幕尺寸并消除较大菜单上的故障。如果有人仍然遇到故障问题，请告诉我，我会找到解决方法。谢谢
EDIT: In the bootstrap v4.1.3 I couldnt use visible/hidden classes. Instead of hidden-xsuse d-none d-sm-blockand instead of visible-xsuse d-block d-sm-none.
编辑：在引导程序 v4.1.3 中，我无法使用可见/隐藏类。代替hidden-xs使用d-none d-sm-block和代替visible-xs使用d-block d-sm-none。
回答by mollwe
I've got it to work with animation!
我已经让它与动画一起工作了！
Menu in html:
html中的菜单：
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
Binding click event on all a elements in navigation to collapse menu (Bootstrap collapse plugin):
将导航中所有元素的单击事件绑定到折叠菜单（Bootstrap 折叠插件）：
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
EDITTo make it more generic we can use following code snippet
编辑为了使它更通用，我们可以使用以下代码片段
$(function(){
var navMain = $(".navbar-collapse"); // avoid dependency on #id
// "a:not([data-toggle])" - to avoid issues caused
// when you have dropdown inside navbar
navMain.on("click", "a:not([data-toggle])", null, function () {
navMain.collapse('hide');
});
});
回答by Hontoni
I think you are all over engineering..
我认为你是工程师。。
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
EDIT: To take care of sub menus, make sure their toggle anchor has the dropdown-toggle class on it.
编辑：要处理子菜单，请确保其切换锚具有下拉切换类。
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
EDIT 2: Add support for phone touch.
编辑 2：添加对手机触摸的支持。
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
回答by Luke Tillman
I really liked Jake Taylor's idea of doing it without additional JavaScript and taking advantage of Bootstrap's collapse toggle. I found you can fix the "flickering" issue present when the menu isn't in collapsed mode by modifying the data-targetselector slightly to include the inclass. So it looks like this:
我真的很喜欢 Jake Taylor 的想法，即无需额外的 JavaScript 并利用 Bootstrap 的折叠切换。我发现您可以通过data-target稍微修改选择器以包含in类来修复菜单未处于折叠模式时出现的“闪烁”问题。所以它看起来像这样：
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
I didn't test it with nested dropdowns/menus, so YMMV.
我没有用嵌套的下拉菜单/菜单测试它，所以 YMMV。
回答by vidriduch
just to be complete, in Bootstrap 4.0.0-beta using .showworked for me...
只是为了完成，在 Bootstrap 4.0.0-beta 中使用.show为我工作......
<li>
<a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
回答by Douglas 'DK' Knudsen
I'm assuming you have a line like this defining the nav area, based on Bootstrap examples and all
我假设您有这样一行定义导航区域，基于 Bootstrap 示例和所有
<div class="nav-collapse collapse" >
Simply add the properties as such, like on the MENU button
只需添加属性，就像在 MENU 按钮上一样
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
I've added to <body>as well, worked. Can't say I've profiled it or anything, but seems a treat to me...until you click on a random spot of the UI to open the menu, so not so good that.
我也加入了<body>，成功了。不能说我已经描述了它或任何东西，但对我来说似乎是一种享受......直到你点击 UI 的一个随机位置来打开菜单，所以不是那么好。
DK
DK
回答by user1040259
This works, but does not animate.
这有效，但没有动画。
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
回答by Jason Swingen
In the HTML I added a class of nav-linkto the atag of each navigation link.
在HTML我添加了一个类的导航链接到一个各导航链接的标签。
$('.nav-link').click(
function () {
$('.navbar-collapse').removeClass('in');
}
);
回答by bp002
this solution have a fine work, on desktop and mobile.
此解决方案在台式机和移动设备上都表现出色。
<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse" data-target=".navbar-collapse collapse">
回答by Jussi J?rvi?
This should do the trick.
这应该可以解决问题。
Requires bootstrap.js.
需要 bootstrap.js。
Example => http://getbootstrap.com/javascript/#collapse
示例 => http://getbootstrap.com/javascript/#collapse
$('.nav li a').click(function() {
$('#nav-main').collapse('hide');
});
This does the same thing as adding 'data-toggle="collapse"' and 'href="yournavigationID"' attributes to navigation menus tags.
这与将 'data-toggle="collapse"' 和 'href="yournavigationID"' 属性添加到导航菜单标签的作用相同。
