twitter-bootstrap Twitter Bootstrap 移动导航：单击菜单链接后隐藏菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16877429/
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
Twitter Bootstrap mobile nav: hide menu after clicking menu link
提问by bjornfloki
I'm looking for a way to make the Twitter Bootstrap mobile/tablet nav automatically hide/collapse after clicking a menu link. I have a lot of menu items and so when users expand the menu in iPhone, they only see the menu and not the page underneath. This confuses the user when they click a menu link, making it seem like nothing has happened after click.
我正在寻找一种方法，使 Twitter Bootstrap 移动/平板电脑导航在单击菜单链接后自动隐藏/折叠。我有很多菜单项，所以当用户在 iPhone 中展开菜单时，他们只能看到菜单而不是下面的页面。当用户单击菜单链接时，这会使用户感到困惑，使单击后似乎什么也没发生。
A huge thank you and hug to anyone who can point me in the right direction with this!
非常感谢你，并拥抱任何能用这个给我指明正确方向的人！
回答by user2562923
If you are using BS3.x you can collapse the mobile nav with markup like this - notice the “data-toggle” and “data-target” in the markup for the home link:
如果您使用的是 BS3.x，您可以使用这样的标记折叠移动导航 - 请注意主页链接标记中的“数据切换”和“数据目标”：
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active">
<a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a>
</li>
<li>
You can also collapse the mobile Nav via script like this:
您还可以通过这样的脚本折叠移动导航：
<script>
$('.navbar-collapse a').click(function (e) {
$('.navbar-collapse').collapse('toggle');
});
</script>
This approach requires absolutely no extra markup. Each time a link is clicked in the nav it will toggle the navbar.
这种方法绝对不需要额外的标记。每次在导航中单击链接时，它都会切换导航栏。
Cheers.
干杯。
回答by Zim
The easiest way I have found is to use the data attributes on any navbar links where collapsing of the mobile navbar is desired. Use data-target=".navbar-collapse.in"so that the navbar is only toggle in it's open state, and not every time the link is clicked.
我发现的最简单的方法是在需要折叠移动导航栏的任何导航栏链接上使用数据属性。使用data-target=".navbar-collapse.in"以便导航栏仅在其打开状态切换，而不是每次单击链接时切换。
<a href="#link" data-toggle="collapse" data-target=".navbar-collapse.in">Link</a>
回答by Charlie Dalsass
The navigation should be closed any time a user clicks anywhere on the body - not just navigation elements. Say menu is open, but user clicks in the page body. User expects to see menu close.
每当用户单击正文的任何位置时都应关闭导航 - 不仅仅是导航元素。假设菜单已打开，但用户单击了页面正文。用户希望看到菜单关闭。
You also have to make sure toggle button is visible, otherwise a jump is seen in menu.
您还必须确保切换按钮可见，否则会在菜单中看到跳转。
$(document).ready(function() {
$("body").click(function(event) {
// only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called
if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
$('.navbar-collapse').collapse('toggle');
}
});
});
回答by Arsylum
Example markup like from the Bootstrap documentation:
来自Bootstrap 文档的示例标记：
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="example-auto-collapse">
Close on menu item click
单击菜单项时关闭
Add to your Javascript accordingly:
相应地添加到您的 Javascript：
$('#example-auto-collapse').on('click', 'a:not(.dropdown-toggle)', function(e) {
$('#example-auto-collapse.in').collapse('hide');
}
Alternative: Close with any click
替代方法：单击关闭
Like Charlie Dalsass suggested it might be preferable to also close the menu when clicking on the page. For that you can replace the Javascript above with the following:
就像 Charlie Dalsass 建议的那样，在单击页面时也关闭菜单可能更可取。为此，您可以将上面的 Javascript 替换为以下内容：
$('body').click(function(e) {
// don't close when opening a sub-menu in our menu
if(!$(e.target).filter('#example-auto-collapse .dropdown-toggle').length > 0) {
$('#example-auto-collapse.in').collapse('hide');
}
}
Even cleaner imowould be to bind and unbind this handler when the menu opens/closes and avoid running the handler in vain on every single click the user makes. It's very unlikely to have any noticeable impact though.
更简洁的 imo是在菜单打开/关闭时绑定和解除绑定此处理程序，并避免在用户每次单击时徒劳地运行处理程序。不过，它不太可能产生任何明显的影响。
I created a stack exchange account just to upvote the answer by Skelly for it's simplicity. Then I found out how one can't upvote without reputation. Then I found out how that solution breaks ScrollSpy. Now this is the solution that works best for me without unwanted side effects.
我创建了一个堆栈交换帐户，只是为了支持 Skelly 的简单答案。然后我发现没有声誉就不能投票。然后我发现了该解决方案是如何破坏 ScrollSpy 的。现在这是最适合我的解决方案，没有不必要的副作用。
回答by Eranda
If you are using sub menu, you have to modify @user2562923's code as follow :
如果您使用子菜单，则必须修改@user2562923 的代码如下：
$('.navbar-collapse a').click(function (e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$('.navbar-collapse').collapse('toggle');
}
});
回答by bjornfloki
In case anyone else is interested, I found a solution elsewhere. It's beautifully simple.
如果其他人有兴趣，我在别处找到了解决方案。这很简单。
Add this id to your markup:
将此 ID 添加到您的标记中：
<nav class="nav-main nav-collapse collapse" id="hideonclick" role="navigation">
And add this to your JS:
并将其添加到您的 JS 中：
$('#hideonclick a').click(function (e) {
e.preventDefault();
$(this).tab('show');
if ($('.btn').is(":visible"))
$('.btn').click();
});
回答by Tarabass
Be aware that the approach to add the data-toggle and data-target attributes to the anchor element doesn't work with scrollspy configured. BS's ScrollSpy cannot activate the menu-item any longer.
请注意，将 data-toggle 和 data-target 属性添加到锚元素的方法不适用于已配置的 scrollspy。BS 的 ScrollSpy 无法再激活菜单项。
