Html 如何在单击时隐藏可折叠的 Bootstrap 4 导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42401606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide collapsible Bootstrap 4 navbar on click
提问by Rudi Thiel
I've created this collapsable navbar using Bootstrap 4 that works nicely, but I would like it to close when the user clicks on a link. Any way to do this? Thanks
我使用 Bootstrap 4 创建了这个可折叠的导航栏，效果很好，但我希望它在用户单击链接时关闭。有没有办法做到这一点？谢谢
html navbar:
html导航栏：
<nav class="navbar navbar-toggleable-md fixed-top">
<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="container">
<a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
<div class="collapse navbar-collapse" id="navbarDiv">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
css for .icon-bar, since Bootstrap 4 doesn't use the icon-bar class.
.icon-bar 的 css，因为 Bootstrap 4 不使用 icon-bar 类。
.navbar-toggler .icon-bar {
margin: 7px;
display: block;
width: 22px;
height: 1px;
background-color: #cccccc;
border-radius: 1px;
}
回答by Zim
You can add the collapsecomponent to the links like this..
您可以将collapse组件添加到这样的链接中..
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home" data-toggle="collapse" data-target=".navbar-collapse.show">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.show">Pricing</a>
</li>
</ul>
Demo using 'data-toggle' method
Or, (perhaps a better way) use jQuery like this..
或者，（也许是更好的方法）像这样使用 jQuery..
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
Update 2019 - Bootstrap 4
2019 年更新 - Bootstrap 4
The navbar has changed, but the "close after click" method is still the same:
导航栏变了，但是“点击后关闭”方法还是一样：
https://codeply.com/go/nFDHoEqqJQ(jQuery method)
https://codeply.com/go/PqIBtz3HPL(data-togglemethod, see Bootstrap Collapse component)
https://codeply.com/go/nFDHoEqqJQ（jQuery方法）
https://codeply.com/go/PqIBtz3HPL（data-toggle方法见 Bootstrap Collapse 组件）
回答by Jesus38
I am using ANGULAR and since it gave me problems the routerLink just add the data-toggle and target in the li tag.... or use jquery like "ZimSystem"
我正在使用 ANGULAR，因为它给我带来了问题，routerLink 只是在 li 标签中添加数据切换和目标......或使用像“ZimSystem”这样的 jquery
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link" routerLink="/inicio" routerLinkActive="active" >Inicio</a>
</li>
</ul>
</div>回答by Michael Coker
You can call $.collapse('hide');with an event handler on the links.
您可以$.collapse('hide');使用链接上的事件处理程序进行调用。
$('.nav-link').on('click',function() {
$('.navbar-collapse').collapse('hide');
});.navbar-toggler .icon-bar {
margin: 7px;
display: block;
width: 22px;
height: 1px;
background-color: #cccccc;
border-radius: 1px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md fixed-top">
<button id="nav-btn" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="container">
<a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
<div class="collapse navbar-collapse" id="navbarDiv">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>回答by Hendrik Vlaanderen
With trying out above solutions, I was missing a solution for Dropdown toggles, so here you go! Also opens submenu items.
通过尝试上述解决方案，我缺少下拉切换的解决方案，所以你去吧！还会打开子菜单项。
Maybe you have to tweak it a bit if your toggle class is different.
如果您的切换类不同，也许您需要稍微调整一下。
$('.navbar-nav li a').on('click', function(){
if(!$( this ).hasClass('dropdown-toggle')){
$('.navbar-collapse').collapse('hide');
}
});
回答by abubakkar tahir
this is the solution to close menu when click on anchor then apply this line in list item
这是单击锚点时关闭菜单的解决方案，然后在列表项中应用此行
data-target="#sidenav-collapse-main" data-toggle="collapse"
the real example that work for me is below
对我有用的真实例子如下
<li class="nav-item" data-target="#sidenav-collapse-main" data-
toggle="collapse" >
<a class="nav-link" routerLinkActive="active" routerLink="/admin/users">
<i class="ni ni-single-02 text-orange"></i> Users
</a>
</li>
回答by Pedro
I am using Angular 5 with Boostrap 4. It works for me in this way.
我将 Angular 5 与 Boostrap 4 一起使用。它以这种方式对我有用。
$(document).on('click', '.navbar-nav>li>a, .navbar-brand, .dropdown-menu>a', function (e) {
if ( $(e.target).is('a') && $(e.target).attr('class') != 'nav-link dropdown-toggle' ) {
$('.navbar-collapse').collapse('hide');
}
});
}<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" [routerLink]="['/home']">FbShareTool</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link" [routerLink]="['/dashboard']">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" [routerLink]="['/fbgroup']">Facebook Group</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
<ul class="navbar-nav navbar-right navbar-right-link">
<li class="nav-item" *ngIf="!_myAuthService.isAuthenticated()" >
<a class="nav-link" (click)="logIn()">Login</a>
</li>
<li class="nav-item" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link">{{ _myAuthService.userDetails.displayName }}</a>
</li>
<li class="nav-item" *ngIf="_myAuthService.isAuthenticated() && _myAuthService.userDetails.photoURL">
<a>
<img [src]="_myAuthService.userDetails.photoURL" alt="profile-photo" class="img-fluid rounded" width="40px;">
</a>
</li>
<li class="nav-item" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link" (click)="logOut()">Logout</a>
</li>
</ul>
</div>
</nav>回答by donmutti
The easiest way to do it using only Angular 2/4 template with no coding:
仅使用 Angular 2/4 模板而无需编码的最简单方法：
<nav class="navbar navbar-default" aria-expanded="false">
<div class="container-wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse no-transition" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
<ul class="nav navbar-nav" (click)="isCollapsed = !isCollapsed">
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="/">Home</a></li>
<li [routerLinkActive]="['active']"><a routerLink="/about">About</a></li>
<li [routerLinkActive]="['active']"><a routerLink="/portfolio">Portfolio</a></li>
<li [routerLinkActive]="['active']"><a routerLink="/contacts">Contacts</a></li>
</ul>
</div>
</div>
</nav>
回答by edu
This code simulates a click on the burguer button to close the navbar by clicking on a link in the menu, keeping the fade out effect. Solution with typescript for angular 7. Avoid routerLink problems.
此代码模拟单击 burguer 按钮以通过单击菜单中的链接关闭导航栏，保持淡出效果。使用 angular 7 的打字稿解决方案。避免 routerLink 问题。
ToggleNavBar () {
let element: HTMLElement = document.getElementsByClassName( 'navbar-toggler' )[ 0 ] as HTMLElement;
if ( element.getAttribute( 'aria-expanded' ) == 'true' ) {
element.click();
}
}
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" [routerLink]="['link1']" title="link1" (click)="ToggleNavBar()">link1</a>
</li>
回答by Mihai Cristian
u can use a simply bind on click and close, like this: (click)="drawer.close()
您可以在单击和关闭时使用简单的绑定，如下所示： (click)="drawer.close()
<a class="nav-link" [routerLink]="navItem.link" routerLinkActive="selected" (click)="drawer.close()">
