我有一个或多或少来自bootstrap 3的标准导航
<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>
它在较小的设备上正常崩溃。单击菜单按钮可以展开菜单，但如果我在菜单链接上单击（或触摸），菜单将保持打开状态。我该怎么办，再次关闭它？
答案 0 :(得分：129)
只是为了在GitHub上的解决方案中分享这个，这是最受欢迎的答案：
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（）上执行此操作（您可以动态地将链接添加到菜单中并且它仍然有效），并且只有在菜单为已经扩大了。有些人报告了菜单打开时出现奇怪的闪烁，然后立即关闭了其他代码，这些代码没有验证菜单中是否有＆＃34; in＆＃34;类。
[UPDATE 2014-11-04]显然在使用子菜单时，上述情况可能会导致问题，因此以上修改为：
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a:not(".dropdown-toggle")') ) {
$(this).collapse('hide');
}
});
答案 1 :(得分：121)
改变这个：
<li><a href="#one">One</a></li>
到此：
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>
这个简单的改变对我有用。
答案 2 :(得分：51)
我遇到了同样的问题，但是包含了 两次 bootstrap.js和jquery.js个文件。
一次单击，两个jquery实例都处理了两次事件。一个关闭，一个打开了切换。
答案 3 :(得分：45)
Bootstrap的默认设置是在单击菜单项时保持菜单打开。您可以通过在要折叠的jQuery元素上调用.collapse('hide');来手动覆盖此行为。
答案 4 :(得分：13)
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
});
这有助于处理导航栏中的下拉列表
答案 5 :(得分：10)
我遇到过与Bootstrap 4相似的问题，alpha-6和Joakim Johansson上面的回答让我开始朝着正确的方向前进。不需要JavaScript。将data-target =“。navbar-collapse”和data-toggle =“collapse”放入导航内的div标签，但围绕链接/按钮，对我有用。
<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
<a class="nav-item nav-link" href="#">Menu Item 1</a>
...
</div>
答案 6 :(得分：6)
我知道这个问题适用于 Bootstrap 3 ，但如果您正在寻找 Bootstrap 4 的解决方案，请执行以下操作：
$(document).on('click','.navbar-collapse.show',function(e) {
$(this).collapse('hide');
});
答案 7 :(得分：5)
我做了
$(".navbar-toggle").click(function(event) {
$(".navbar-collapse").toggle('in');
});
答案 8 :(得分：5)
我遇到了同样的问题，我使用的是jQuery-1.7.1和bootstrap 3.2.0。
我将我的jQuery版本更改为最新版本（jquery-1.11.2），一切正常。
答案 9 :(得分：4)
虽然之前发布的更改菜单项本身的解决方案（如下所示）在菜单位于小型设备上时起作用，但当菜单全宽并且展开时会产生副作用，这可能导致滑动菜单项的水平滚动条。 JavaScript解决方案没有这种副作用。
<li><a href="#one">One</a></li> to
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>
（很抱歉这样回答，想对这个答案添加评论，但是，似乎我没有足够的信誉来发表评论）
答案 10 :(得分：2)
$(function(){
var navMain = $("#your id");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
答案 11 :(得分：1)
如果您想通过在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>
答案 12 :(得分：1)
如果您只想在移动设备屏幕上使用导航切换，只需将data-toggle="collapse"和data-target="#navbar"添加到您的元素即可在移动设备屏幕上显示，但会在您显示时发出奇怪的闪烁点击桌面屏幕。如果您处于Aurelia或Angular环境中，jQuery解决方案将无法正常运行。
对我来说，最好的解决方案是创建一个自定义属性来侦听相应的媒体查询，并根据需要添加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);
}
}
}
}
答案 13 :(得分：0)
我只在移动设备上遇到过同样的问题，但是对于Angular应用程序，这就是我所做的：
app.component.html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="col-md-12">
<div class="navbar-header page-scroll">
<button id ="navButton" style="color:red"type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" routerLink="/"><img id="navbrand" class="site-logo" src="assets/img/yayaka_logo.png"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="dropdown" appDropdown>
<a class="dropdown-toggle" style="cursor: pointer;">
ΤΙ ΕΙΝΑΙ ΤΟ yayaka<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a (click) = "closeMenu()" href="/#about">About</a></li>
<li><a (click) = "closeMenu()" href="/#services">Services</a></li>
</ul>
</li>
<li class="page-scroll">
<a (click) = "closeMenu()" routerLink="/profiles"><strong>Profiles</strong></a>
</li>
</ul>
</div>
</div>
</div>
</nav>
app.component.ts
closeMenu() {
var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
if (isMobile) {
document.getElementById('navButton').click();
}
}
希望它会有所帮助：）
答案 14 :(得分：0)
您可能只想确保加载jQuery和Bootstrap.min.js ATF。您的导航是第一个在页面上呈现的内容，因此如果您的脚本位于HTML的底部，则会丢失任何JavaScript功能。
答案 15 :(得分：0)
问题可能是您正在使用过时版本的bootstrap或jquery，或者您在标记中调用了多个版本。
只需保留最新版本，您只需要一个参考。解决问题。
答案 16 :(得分：0)
我遇到了类似的问题，但我不会保持打开它会快速打开/关闭，我发现我在bootstrap.min.js之前加载了jquery-1.11.1.min.js。所以我颠倒了这两个文件的顺序并修复了我的菜单。现在运行完美无缺。希望它有所帮助
答案 17 :(得分：0)
简单尝试在javascript中为下拉崩溃类创建一个函数。
示例：
<强> JS ：
$scope.toogleMyClass = function(){
//dropdown-element
$timeout(function(){
$scope.preLoader = false;
$(document).ready(function() {
$("#dropdown-element").toggleClass('show');
});
},100);
};
将这个功能挂钩到onClick简单的作品。
答案 18 :(得分：0)
我遇到了同样的问题，请确保您的html页面中包含bootstrap.js。在我的情况下菜单打开但没有关闭。一旦我包含了bootstrap js文件，一切都正常工作。
答案 19 :(得分：0)
这是对我有用的代码：
jQuery('document').ready(function()
{
$(".navbar-header button").click(function(event) {
if ($(".navbar-collapse").hasClass('in'))
{ $(".navbar-collapse").slideUp(); }
});})
答案 20 :(得分：0)
请确保您使用的是最新的bootstrap js版本。我遇到了同样的问题，只是从bootstrap-3.3.6升级bootstrap.js文件就行了神奇。
答案 21 :(得分：0)
我发现经过多次努力，反复试验，对我来说是最好的解决方案。 Link to inspiration on jsfiddle.net。我正在使用bootstrap的navbar navbar-fixed-top与折叠和汉堡包切换。这是我在jsfiddle的版本：jsfiddle Scrollspy navbar。我只是使用getbootsrap.com上的说明获得基本功能。对我来说，问题主要在于getbootstrap网站推荐的模糊方向和js。最好的部分是添加这些额外的js（其中包括上面线程中提到的一些内容）为我解决了几个Scrollspy问题，包括：
注意：在下面显示的js代码中（来自我帖子中的第二个jsfiddle链接）：
topMenu = $（“＃myScrollspy”），
...值“myScrollspy”必须与HTML中的id =“”匹配，如此...
<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">
当然，您可以将该值更改为您喜欢的任何值。
答案 22 :(得分：0)
你需要的只是按钮中的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>
答案 23 :(得分：-2)
我的菜单不是导航栏标准，但我设法使用“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