twitter-bootstrap 当折叠可见时，如何通过单击正文隐藏我的折叠引导程序 3 导航栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21240594/
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
How to hide my collapse bootstrap 3 navbar with click on body when, collapse is visible?
提问by user3216077
I'm making a WordPress website for agency where I will go work. I used Bootstrap 3.0, and I created a responsive menu.
我正在为我将去工作的机构制作一个 WordPress 网站。我使用了 Bootstrap 3.0，并创建了一个响应式菜单。
How to hide menu when is collapsed and visible (2nd pic) with click on body, and menu button change it color only collapse is visible?
如何在折叠和可见（第二张图片）时隐藏菜单，单击正文，菜单按钮更改颜色，只有折叠可见？
bootstrap.js and jquery is connected in my footer.
bootstrap.js 和 jquery 在我的页脚中连接。
回答by Marapet
This is a functional solution:
这是一个功能解决方案：
$(document).on('click touchstart', function (e) {
if ($(e.target).closest(".navbar-collapse").length === 0 && $(e.target).closest('[data-target=".navbar-collapse"]').length === 0) {
$(".navbar-toggle").collapse('hide');
}
});
回答by hsobhy
<script type='text/javascript'>
$(document).ready(function () {
function CloseNav() {
$(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
$(".navbar-toggle").stop().removeClass('collapsed');
}
$('html').click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
CloseNav();
}
});
});
</script>
Update
更新
you can change the html selector to whatever selector you want, body (if you have enough height), wrapper or whatever. A clean fiddle example here
您可以将 html 选择器更改为您想要的任何选择器，主体（如果您有足够的高度）、包装器或其他任何选择。这里有一个干净的小提琴示例
回答by Tennom
Here is another approach which is working for me.
这是另一种对我有用的方法。
My scenario: I want to hide the collapsible when I click anywhere outside of a form which contains a dropdownlist.
我的场景：当我单击包含下拉列表的表单之外的任何地方时，我想隐藏可折叠对象。
$(document).ready(function(){
//check if collapsible is shown
$(".collapse").on('shown.bs.collapse', function(){
//then check if there was a click
$(document).click(function(event) {
//exclude the click was on the form
if (!$(event.target).hasClass("input-default")) {
//then hide it
$(".collapse").collapse('hide');
}
});
});
});
回答by Konstantin XFlash Stratigenas
$('.collapse').collapse('hide');
回答by Pedram Vdl
You don't want to listen for the click all the time that is so wrong. you have to bind and unbind based on the navbar status. here is my navbar-colapse and it's id is 'z', and when it is open i will listen for clicks and when it's closed i don't listen anymore. i will put comment on the code:
你不想一直听那太错误的咔嗒声。您必须根据导航栏状态绑定和取消绑定。这是我的导航栏折叠，它的 id 是“z”，当它打开时我会听点击，当它关闭时我不再听了。我将对代码发表评论：
//CALLBACK AFTER NAVBAR-COLLAPSE OPEN
$('#z').on('shown.bs.collapse', function () {
// HERE WE BIND THE CLICK TO THE HANDLER FUNCTION
$(document).bind( "click", handler );
})
//CALLBACK AFTER NAVBAR-COLLAPSE CLOSE
$('#z').on('hidden.bs.collapse', function () {
// SINCE THE NAVBAR IS CLOSED WE DONT NEED TO LISTEN FOR CLICKS ANYMORE
$(document).unbind( "click", handler );
})
//THIS IS THE FUNCTION THAT GET FIRED
var handler = function() {
//LISTEN FOR CLICKS
$(document).click(function(event) {
//HERE FORM-CONTROL IS MY SEARCH BOX IN THE NAV SO I DONT WANT TO CLOSE
//THE NAVBAAR IF THEY CLICK ON FONT-CONTROL, BUT ANYTHING BESIDE THAT WE CLOSE THE NAVBAR
if (!$(event.target).hasClass("form-control")) {
$('#z').collapse('hide');
}
});
};
Also here is my nav-bar code :)
这也是我的导航条码:)
<nav class="navbar navbar-default my-nav" data-spy="affix" id="nav" style="margin-bottom: 0">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#z" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">-</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="z">
<div class="navbar-form navbar-left my-navbar-left" role="search">
<div class="form-group">
<input id="searchbar" type="text" class="form-control" placeholder="Search for ads">
</div>
</div>
<ul class="nav navbar-nav navbar-right my-navbar-right">
<li><a class="tab-c tab-home"> <span class="text-to-icon">Posts</span> </a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
回答by Wali-ud-Din Durrani
This works. It will close the collapsed navbar when touched anywhere on the mobile touchscreen.
这有效。当触摸移动触摸屏上的任何位置时，它将关闭折叠的导航栏。
$(document).on('touchend', function (event) {
var clickover = $(event.target);
var $navbar = $(".navbar-collapse");
var _opened = $navbar.hasClass("in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$navbar.collapse('hide');
}
});
回答by Santiago Rebella
I think your best approach would be to do something in a mediaquery, or pherhaphs with js instead, check in bootstrap page which are the break points and use the one you are interested in.
我认为您最好的方法是在 mediaquery 中做一些事情，或者使用 js 进行 pherhaphs，检查引导页面，这是断点并使用您感兴趣的断点。
