Bootstrap 3折叠菜单不会在点击时closures
我有一个从引导3或多或less的标准导航
<body data-spy="scroll" data-target=".navbar-collapse"> <!-- ---------- Navigation ---------- --> <div class="navbar navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> </button> <a class="navbar-brand" href="index.html"> <img src="#"></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#home">Home</a></li> <li><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> <li><a href="#four">Four</a></li> </ul> </div> </div> </div> 它通常在较小的设备上崩溃。 点击菜单button展开菜单，但是如果我在菜单链接上点击（或触摸那个），菜单保持打开状态。 我必须做什么，再次closures它？
引导程序的默认设置是当您单击菜单项时保持菜单打开。 您可以通过调用.collapse('hide');手动覆盖此行为.collapse('hide'); 在你想要折叠的jQuery元素上。
只是为了从GitHub的解决scheme分享这个，这是受欢迎的答案：
https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247
$(document).on('click','.navbar-collapse.in',function(e) { if( $(e.target).is('a') ) { $(this).collapse('hide'); } });
这是连接到文档，所以你不必在ready（）（你可以dynamic地追加链接到你的菜单，它仍然会工作），它只会被调用，如果菜单已经展开。 有些人在菜单打开的地方报了个奇怪的闪烁，然后立即closures其他代码，但是没有validation菜单是否有“in”类。
[UPDATE 2014-11-04]显然，在使用子菜单时，上面的问题可能会引起问题，所以上面修改为：
$(document).on('click','.navbar-collapse.in',function(e) { if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) { $(this).collapse('hide'); } });
改变这个：
<li><a href="#one">One</a></li>
对此：
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>
这个简单的改变为我工作。
参考： https ： //github.com/twbs/bootstrap/issues/9013
我有同样的问题，但包括两次 bootstrap.js和jquery.js文件引起的。
只需单击一下，jquery实例就会处理两次事件。 一个closures，一个打开切换。
$(".navbar-nav li a").click(function(event) { if (!$(this).parent().hasClass('dropdown')) $(".navbar-collapse").collapse('hide'); });
这将有助于处理导航栏中的下拉菜单
我有同样的问题，我使用的是jQuery-1.7.1和bootstrap 3.2.0 。 我改变了我的jQuery版本到最新的（ jquery-1.11.2 ）版本，一切正常。
尽pipe之前发布的改变菜单项的解决scheme（如下所示）在菜单位于小型设备上时起作用，但当菜单处于全宽和展开状态时会产生副作用，这会导致水平滚动条滑过您的菜单项 。 javascript解决scheme没有这个副作用。
<li><a href="#one">One</a></li> to <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>
（对于这样的回答感到抱歉，我想给这个答案增加一个评论，但是，似乎我没有足够的信用来发表评论）
我做了
$(".navbar-toggle").click(function(event) { $(".navbar-collapse").toggle('in'); });
我和Bootstrap 4，alpha-6有类似的问题， Joakim Johansson的答案让我朝着正确的方向发展。 没有JavaScript的要求。 把data-target =“。navbar-collapse”和data-toggle =“collapse”放到nav里面的div标签里，但是在链接/button周围，对我来说很合适。
<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse"> <a class="nav-item nav-link" href="#">Menu Item 1</a> ... </div>
如果你想通过在angular的指令中调用.collapse（'hide'）手动覆盖这个行为，下面是代码：
javascript文件：
angular .module('yourAppModule') .directive('btnAutoCollapse', directive); function directive() { var dir = { restrict: 'A', scope: {}, link: link }; return dir; function link(scope, element, attrs) { element.on('click', function(event) { $(".navbar-collapse.in").collapse('hide'); }); } }
HTML：
<li class="navbar-btn"> <a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a> </li>
如果您只希望在移动屏幕上使用导航function，只需在移动设备上添加data-toggle="collapse"和data-target="#navbar"即可。点击桌面屏幕时闪烁。 如果您处于Aurelia或Angular环境中，jQuery解决scheme效果不佳。
对我来说最好的解决scheme是创build一个自定义属性来侦听相应的媒体查询，并在需要时添加data-toggle="collapse"属性：
<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...
Aurelia的自定义属性如下所示：
import {autoinject} from 'aurelia-framework'; @autoinject export class CollapseToggleIfLess768CustomAttribute { element: Element; constructor(element: Element) { this.element = element; var mql = window.matchMedia("(min-width: 768px)"); mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList)); this.handleMediaChange(mql); } handleMediaChange(mediaQueryList: MediaQueryList) { if (mediaQueryList.matches) { var dataToggle = this.element.attributes.getNamedItem("data-toggle"); if (dataToggle) { this.element.attributes.removeNamedItem("data-toggle"); } } else { var dataToggle = this.element.attributes.getNamedItem("data-toggle"); if (!dataToggle) { var dataToggle = document.createAttribute("data-toggle"); dataToggle.value = "collapse"; this.element.attributes.setNamedItem(dataToggle); } } } }
在Bootstrap 4中，只需执行以下操作：
$(document).on('click','.navbar-collapse.show',function(e) { $(this).collapse('hide'); });
$(function(){ var navMain = $("#your id"); navMain.on("click", "a", null, function () { navMain.collapse('hide'); }); });
我发现，经过很多的努力，试错，对我来说最好的解决scheme就是jsfiddle。 链接到jsfiddle.net上的灵感 。 我正在使用引导程序的导航栏导航栏固定与崩溃和汉堡切换顶部。 这里是我在jsfiddle上的版本： jsfiddle Scrollspy navbar 。 我只使用getbootsrap.com上的说明获取基本function。 对我来说，问题主要是由getbootstrap网站推荐的模糊方向和js。 最好的部分是，添加这个额外的js（包括上述线程中提到的部分内容）为我解决了几个Scrollspy问题，其中包括：
- 当nav“section”（例如href =“＃foobar”）被点击时（问题解决这个线程），折叠/切换的nav菜单被隐藏。
- 主动“部分”被成功突出显示（即js成功创buildclass =“active”）
- 折叠导航（只在小屏幕上）find恼人的垂直滚动条被淘汰。
注意：在下面显示的js代码（从我的post中的第二个jsfiddle链接）：
topMenu = $（“＃myScrollspy”），
…“myScrollspy”的值必须与HTML中的id =“”匹配，比如…
<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">
当然，你可以把这个价值改变成你喜欢的任何价值。
所有你需要的是button中的data-target =“。navbar-collapse”，没有别的。
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
请确保您使用的是最新的bootstrap js版本。 我面临同样的问题，只是从bootstrap-3.3.6升级bootstrap.js文件做了魔术。
这是我工作的代码：
jQuery('document').ready(function() { $(".navbar-header button").click(function(event) { if ($(".navbar-collapse").hasClass('in')) { $(".navbar-collapse").slideUp(); } });})
我有同样的问题，确保bootstrap.js包含在您的HTML页面。 在我的情况下，菜单打开，但没有closures。 只要我包括引导js文件，一切工作。
简单的尝试在下拉式折叠类的JavaScript中做一个函数。
例：
JS ：
$scope.toogleMyClass = function(){ //dropdown-element $timeout(function(){ $scope.preLoader = false; $(document).ready(function() { $("#dropdown-element").toggleClass('show'); }); },100); };
把这个函数钩到onClick对我来说简单的作品。
我有类似的问题，但我不会保持打开它会很快打开/closures，我发现我有jquery-1.11.1.min.js加载之前bootstrap.min.js。 所以我扭转了这两个文件的顺序，并修复了我的菜单。 现在运行完美无瑕。 希望它有帮助
问题可能是你正在使用bootstrap或jquery的过期版本，或者你正在调用标记中的多个版本。
只保留最新版本，您只需要一个参考。 解决问题。
你可能想要确保你正在加载你的jQuery和Bootstrap.min.js ATF。 您的导航是在页面上呈现的第一个东西，所以如果您的脚本位于HTML的底部，则会失去任何JavaScriptfunction。
我的菜单不是一个标准的导航栏，但我设法自动崩溃我的，使用“onclick”函数和“.click（）”。
<div class="main-header"> <div class="container"> <div id="menu-wrapper"> <div class="row"> <div class="logo-wrapper col-lg-4 col-md-6 col-sm-7 hidden-xs"> </div> <!-- /.logo-wrapper --> <div class="logo-wrapper2 visible-xs col-xs-9"> </div> <!-- /.smaller logo-wrapper --> <div class="col-lg-8 col-md-6 col-sm-5 col-xs-3 main-menu text-center"> <ul class="menu-first hidden-md hidden-sm hidden-xs"> <li class="active"><a href="#">item1</a></li> | <li><a href="#our-team">item2</a></li> | <li><a href="#services">item3</a></li> | <li><a href="#elia">item4</a></li> | <li><a href="#portfolio">item5</a></li> | <li><a href="#contact">item6</a></li> </ul> <a href="#" class="toggle-menu visible-md visible-sm visible-xs"><i class="fa fa-bars"></i></a> </div> <!-- /.main-menu --> </div> <!-- /.row --> </div> <!-- /#menu-wrapper --> <div class="menu-responsive hidden-lg"> <ul> <li class="active" onclick = $(".toggle-menu").click();><a href="#">item1</a></li> <li><a href="#our-team" onclick = $(".toggle-menu").click();>item2</a></li> <li><a href="#services" onclick = $(".toggle-menu").click();>item3</a></li> <li><a href="#elia" onclick = $(".toggle-menu").click();>item4</a></li> <li><a href="#portfolio" onclick = $(".toggle-menu").click();>item5</a></li> <li><a href="#contact" onclick = $(".toggle-menu").click();>item6</a></li> </ul> </div> <!-- /.menu-responsive --> </div> <!-- /.container --> </div> <!-- /.main-header
