jQuery 点击隐藏 Twitter Bootstrap 导航折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16680543/
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
Hide Twitter Bootstrap nav collapse on click
提问by Tim Vitor
This is not a submenu dropdown, the category is class li as in the picture:
这不是子菜单下拉菜单，类别是类 li，如图所示：
By selecting a category from the responsive menu (the template is just one page), I want to hide nav collapse automatically when clicking. Also stroll to use as navigation, since the template has only one page. I seek a solution that does not affect it, here is the HTML code of menu:
通过从响应式菜单中选择一个类别（模板只是一页），我想在单击时自动隐藏导航折叠。也可以漫步用作导航，因为模板只有一页。我寻求一个不影响它的解决方案，这是菜单的HTML代码：
<!-- NAVBAR
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Carousel Demo</a>
<div class="nav-collapse">
<ul class="nav" >
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
<!-- dropdown -->
</ul>
<!-- /.nav -->
</div>
<!--/.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
回答by WooCaSh
try this:
尝试这个：
$('.nav a').on('click', function(){
$('.btn-navbar').click(); //bootstrap 2.x
$('.navbar-toggle').click(); //bootstrap 3.x by Richard
$('.navbar-toggler').click(); //bootstrap 4.x
});
回答by Zu1779
I just replicate the 2 attributes of the btn-navbar(data-toggle="collapse" data-target=".nav-collapse.in") on each link like this:
我只是在每个链接上复制btn-navbar( data-toggle="collapse" data-target=".nav-collapse.in")的 2 个属性，如下所示：
<div class="nav-collapse">
<ul class="nav" >
<li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a></li>
<li><a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a></li>
<li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a></li>
<li><a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a></li>
<li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a></li>
</ul>
</div>
In the Bootstrap 4 Navbar, inhas changed to showso the syntax would be:
在Bootstrap 4 Navbar 中，in已更改为show因此语法为：
data-toggle="collapse" data-target=".navbar-collapse.show"
data-toggle="collapse" data-target=".navbar-collapse.show"
回答by user2883298
$(function() {
$('.nav a').on('click', function(){
if($('.navbar-toggle').css('display') !='none'){
$('.navbar-toggle').trigger( "click" );
}
});
});
回答by Vadim P.
回答by purefusion
Even more elegant without a lick of duplicated code, is to simply apply the data-toggle="collapse"and data-target=".nav-collapse"attributes to the nav itself:
更优雅，无需重复代码，只需将data-toggle="collapse"和data-target=".nav-collapse"属性应用于导航本身：
<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">
<ul class="nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
Super clean, no JavaScript required. Works great, so long as your your nav aelements have plenty enough padding for fat fingers, and you aren't preventing click event bubbling via e.stopPropagation()when users click on nav aitems.
超级干净，不需要 JavaScript。效果很好，只要你的nav a元素有足够的填充来容纳胖手指，并且e.stopPropagation()当用户点击nav a项目时你不会阻止点击事件冒泡。
回答by FullStackDev
Update your
更新您的
<li>
<a href="#about">About</a>
</li>
to
到
<li>
<a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>
This simple change worked for me.
这个简单的改变对我有用。
回答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 TheAivis
Tested on Bootstrap 3.3.6 - work's!
在 Bootstrap 3.3.6 上测试 - 工作的！
$('.nav a').click(function () {
$('.navbar-collapse').collapse('hide');
});回答by Getsomepeaches
Try this > Bootstrap 3
试试这个> Bootstrap 3
Brilliant exacly what I was looking for, however I had some clashes with the javascript and the bootstrap modal, this fixed it.
非常棒，正是我想要的，但是我与 javascript 和 bootstrap 模式发生了一些冲突，这修复了它。
$(function() {
$('.navbar-nav').on('click', function(){
if($('.navbar-header .navbar-toggle').css('display') !='none'){
$(".navbar-header .navbar-toggle").trigger( "click" );
}
});
});
Hope this helps.
希望这可以帮助。
回答by MichaelMcCabe
This worked well for me. Its the same as the accepted answer but fixes the issue related to the desktop/tablet view
这对我来说效果很好。它与接受的答案相同，但修复了与桌面/平板电脑视图相关的问题
$('.navbar-nav a').on('click', function () {
if (window.innerWidth <= 768) {
$(".navbar-toggle").click();
}
});