自动closures响应式导航栏

我正在使用Bootstrap响应式导航栏。 当导航栏被折叠,我打开菜单并点击一个菜单项时,菜单不会自动closures,我必须自己手动完成。

点击其中一个button后是否可以自动closures菜单?

12 Solutions collect form web for “自动closures响应式导航栏”

编辑:正如Maximus指出的那样, 3.x bootstrap解决scheme是:

 $('.navbar-collapse a').click(function(){ $(".navbar-collapse").collapse('hide'); }); 

https://jsfiddle.net/yohuLuj2/


2.x bootstrap的旧答案:

您应该可以通过将单击处理程序添加到列表项目然后closures导航。

 $('.nav-collapse').click('li', function() { $('.nav-collapse').collapse('hide'); }); 

下面是一个jsfiddle: http : //jsfiddle.net/hajpoj/By6ym/4/

自举的工作解决scheme3

 $('.navbar-collapse a').click(function(){ $(".navbar-collapse").collapse('hide'); }); 

我只是在每个链接上复制btn-navbar(data-toggle =“collapse”data-target =“。nav-collapse”)的2个属性,如下所示:

 <div class="nav-collapse"> <ul class="nav" > <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse">Home</a></li> <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li> <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li> <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse">Services</a></li> <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li> </ul> </div> 

只有我join杰森的解决scheme是下拉的例外。 如果有人只是点击切换子菜单,您不想closures菜单。 所以…

 $('.navbar-collapse a:not(.dropdown-toggle)').click(function(){ $(".navbar-collapse").collapse('hide'); }); 

@迈克的下拉解决scheme为我工作,除了在下拉菜单中的项目不会隐藏菜单,所以我一定要添加这个:

 $('.navbar-collapse .dropdown-menu').click(function(){ $(".navbar-collapse").collapse('hide'); }); 

只要记住遍历DOM树并closures相关的导航栏,而不是所有的导航栏。 特别是对于Bootstrap 3,请使用类似于以下代码段的内容:

 $("body").on("click", ".navbar-collapse a", function() { var $this = $(this); setTimeout(function() { $this.closest(".navbar-collapse").collapse('hide'); }, 350); }); 

另一个问题是,当你看到桌面上的导航栏,它试图隐藏/显示导航栏,所以我做了这个:

 $('.navbar-collapse a:not(.dropdown-toggle)').click(function(){ if($(window).width() < 768 ) $('.navbar-collapse').collapse('hide'); }); 

我通过添加button点击pipe理完成答案:

 $(document).on('click', '.navbar-collapse.collapse.in a:not(.dropdown-toggle)', function() { $(this).closest(".navbar-collapse").collapse('hide'); }); $(document).on('click', '.navbar-collapse.collapse.in button:not(.navbar-toggle)', function() { $(this).closest(".navbar-collapse").collapse('hide'); }); 

我的问题是,我正在用锚点创build单页面布局。 所以,当你缩小窗口,菜单隐藏链接点击完美。 感谢上面的用户谁给了我线索。 但是,当窗口变大时,绑定事件总是在那里(不用重新加载,尽pipe)。 所以,在这里我做了什么。 希望它可以帮助别人:)

 jQuery.noConflict(); (function($){ $('ul#menu-menu-with-anchors li a, a[href="#top"]').click(function(){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top - ($('body').hasClass('admin-bar') ? 160 : 130) }, 500); return false; }); bindUnbindNavToggle($); $(window).resize(function(){ bindUnbindNavToggle($); }); })(jQuery); function bindUnbindNavToggle($){ if( $('button.navbar-toggle').css('display') != 'none' ) { $('.navbar-collapse ul li a').on('click', function(){ $('.navbar-collapse').collapse('hide'); return false; }); } else { $('.navbar-collapse ul li a').on('click', function(){ return false; }); } } 

如果您使用Angular,则可以将折叠绑定到路线导航:

 $scope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $(".navbar-collapse").collapse('hide'); }); 

简单地把这个代码放在main.js中

  $(document).on('click', '.navbar-collapse.in', function (e) { if ($(e.target).is('a')) { $(this).collapse('hide'); } }); 

也许有人需要隐藏菜单,只要点击到其他地方(我想应该没有子菜单)。 然后在jquery,bootstrap.js之后的某个地方添加这个代码

 $('button.navbar-toggle').focusout(function(){ $(".navbar-collapse").collapse('hide'); }); 
  • 移动设备上的Twitter Bootstrap模式
  • 如何使用Twitter的Bootstrap在线显示列表
  • 如何在Bootstrap中设置ScrollSpy的偏移量?
  • 获取新的Twitter API消费者和密钥
  • Android - 分享到Facebook,Twitter,邮件,ecc
  • Asp.Net MVC 5 Owin Twitter Auth投掷401exception
  • 使用Twitter Bootstrap将样式应用于表格
  • 如何使用iOS上的原生Twitter应用程序打开Twitter推文?
  • 微博整合在Android应用程序
  • 如何在应用程序的二进制文件中存储一个秘密的API密钥?
  • TwitteR,ROAuth和Windows:注册成功,但证书validation失败