我有一个或多或少来自引导程序 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>
它在较小的设备上正常折叠。单击菜单按钮会展开菜单，但如果我单击(或触摸)菜单链接，菜单将保持打开状态。我必须做什么才能再次关闭它？
只是为了从 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()上这样做(你可以动态地将链接附加到你的菜单，它仍然可以工作)，并且只有在菜单已经展开时才会被调用。 有些人报告说菜单打开的地方出现奇怪的闪烁，然后立即使用其他代码关闭，这些代码没有验证菜单是否具有"in"类。
[更新 2014-11-04] 显然在使用子菜单时，上述内容可能会导致问题，因此将上述内容修改为：
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a:not(".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 实例就处理了两次事件。一个关闭，一个打开切换。
Bootstrap 的默认设置是在单击菜单项时保持菜单打开状态。您可以通过在要折叠的 jQuery 元素上调用.collapse('hide');来手动覆盖此行为。
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
});
这将有助于处理导航栏中的下拉列表
我在 Bootstrap 4、alpha-6 和 Joakim Johansson 上面的回答中遇到了类似的问题，这让我朝着正确的方向前进。 不需要JavaScript。 将数据目标=".navbar-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>我做到了
$(".navbar-toggle").click(function(event) {
$(".navbar-collapse").toggle('in');
});
我知道这个问题是针对 Bootstrap 3 的，但如果您正在寻找Bootstrap 4的解决方案，只需这样做：
$(document).on('click','.navbar-collapse.show',function(e) {
$(this).collapse('hide');
});
我遇到了同样的问题，我使用的是jQuery-1.7.1和bootstrap 3.2.0。 我将jQuery版本更改为最新版本(jquery-1.11.2)，一切正常。
尽管之前发布的用于更改菜单项本身的解决方案(如下所示)在菜单位于小型设备上时有效，但当菜单处于全宽和展开时，它会产生副作用，这可能会导致水平滚动条在菜单项上滑动。javascript解决方案没有这种副作用。
<li><a href="#one">One</a></li> to
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#one">One</a></li>
(很抱歉这样回答，想对那个答案添加评论，但是，似乎我没有足够的信用来发表评论)
$(function(){
var navMain = $("#your id");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
如果你想通过在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');
});
}
}
目录：
<li class="navbar-btn">
<a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>
请确保您使用的是最新的引导 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(); }
});})
如果您只希望导航在移动屏幕上使用时切换，只需添加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);
}
}
}
}我只在移动设备上遇到了同样的问题，但对于 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();
}
}
希望对:)有所帮助
经过多次斗争、反复试验，我发现在 jsfiddle 上对我来说是最好的解决方案。 链接到 jsfiddle.net 上的灵感。 我正在使用引导的导航栏导航栏固定顶部，带有折叠和汉堡切换。 这是我在jsfiddle上的版本：jsfiddle Scrollspy导航栏。 我只是使用 getbootsrap.com 上的说明获得基本功能。 对我来说，问题主要出在getbootstrap站点推荐的模糊方向和js上。 最好的部分是添加这个额外的js(确实包括上述线程中提到的一些内容)为我解决了几个Scrollspy问题，包括：
单击导航">- 部分"(例如 href="#foobar")时，折叠/切换的导航菜单会隐藏(解决此线程的问题)。
- 活动"部分"已成功突出显示(即.js成功创建类="活动") 删除了在
- 折叠的导航(仅在小屏幕上)上发现的烦人的垂直滚动条。
注意：在下面显示的js代码中(来自我帖子中的第二个jsfiddle链接)：
topMenu = $("#myScrollspy")，
。值"myScrollspy"必须与HTML中的id="匹配，就像这样...
<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">
当然，您可以将该值更改为您喜欢的任何值。
您所需要的只是按钮中的数据目标=".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 包含在您的 html 页面中。就我而言，菜单打开但没有关闭。一旦我包含引导 js 文件，一切正常。
简单 尝试在javascript中为下拉列表折叠类创建一个函数。
例：
JS：
$scope.toogleMyClass = function(){
//dropdown-element
$timeout(function(){
$scope.preLoader = false;
$(document).ready(function() {
$("#dropdown-element").toggleClass('show');
});
},100);
};
将此功能挂在onClick简单的工作中
我有类似的问题，但我不会保持打开状态，它会很快打开/关闭，我发现我在bootstrap.min之前加载了jquery-1.11.1.min.js.js。所以我颠倒了这两个文件的顺序并修复了我的菜单。现在运行完美。希望对你有帮助
问题可能是您正在使用过时的引导或jquery版本，或者您在标记中调用了多个版本。
只需保留最新版本，您只需要一个参考。解决了问题。
你可能只想确保加载jQuery和Bootstrap.min.js ATF。你的导航是首先呈现在页面上的东西，所以如果你的脚本在HTML的底部，你就会失去任何JavaScript功能。
我的菜单不是导航栏标准菜单，但我设法使用"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