如何在点击正文时隐藏我的折叠bootstrap 3导航栏，崩溃是否可见？
我正在为代理商制作一个WordPress网站，我将去那里工作。 我使用了Bootstrap 3.0，并创建了一个响应式菜单。
折叠和可见时如何隐藏菜单（第2张图片）点击正文，菜单按钮改变颜色只有崩溃可见？
bootstrap.js和jquery在我的页脚中连接。
试试这个例子
更新
你可以将html选择器更改为你想要的任何选择器，body（如果你有足够的高度），包装器或其他什么。 这是一个干净的小提琴示例
这是一个function性解决方案：
$(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'); } });
这很有效。 当触摸移动触摸屏上的任何位置时，它将关闭折叠的导航栏。
$(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'); } });
这是另一种适合我的方法。
我的场景：当我点击包含下拉列表的表单之外的任何地方时，我想要隐藏可折叠的内容。
$(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'); } }); }); });
我认为你最好的方法是在媒体查询中做一些事情，或者用js做一些pherhaphs，检查bootstrap页面哪些是断点并使用你感兴趣的那个。
您不希望一直听到错误的点击。 你必须根据导航栏状态绑定和解除绑定。 这是我的navbar-colapse，它的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'); } }); };
这里还有我的导航条码:)