我使用Bootstrap 4创建了这个可折叠的导航栏，效果很好，但我想在用户点击链接时关闭它。有什么办法吗？感谢
html navbar：
rule "Get Subject key: with particular value"
when
attribute : Attribute($mapAttribute : mapAttribute)
$values : String( this == "email1" ) from $mapAttribute.get("Subject")
then ... end
css for .icon-bar，因为Bootstrap 4没有使用icon-bar类。
<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>
答案 0 :(得分：88)
您可以将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
或 ，（也许是更好的方式）使用这样的jQuery ..
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
更新2019年 - Bootstrap 4
导航栏已更改，但“点击后关闭”方法仍然相同：
https://www.codeply.com/go/nFDHoEqqJQ（jQuery方法）
https://www.codeply.com/go/PqIBtz3HPL（data-toggle方法）
答案 1 :(得分：18)
我正在使用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>
答案 2 :(得分：11)
您可以使用链接上的事件处理程序调用{{1}}。
$.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;
}
答案 3 :(得分：6)
通过尝试上述解决方案，我错过了Dropdown切换的解决方案，所以你走了！同时打开子菜单项。
如果您的切换类不同，也许您必须稍微调整一下。
$('.navbar-nav li a').on('click', function(){
if(!$( this ).hasClass('dropdown-toggle')){
$('.navbar-collapse').collapse('hide');
}
});
答案 4 :(得分：3)
这是单击锚点然后在列表项中应用此行时关闭菜单的解决方案
data-target="#sidenav-collapse-main" data-toggle="collapse"
对我有用的真实示例如下
<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>
答案 5 :(得分：2)
我正在使用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>
答案 6 :(得分：1)
最简单的方法是只使用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>
答案 7 :(得分：0)
此代码模拟单击burguer按钮以通过单击菜单中的链接来关闭导航栏，从而保持淡出效果。带有用于角度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>
答案 8 :(得分：0)
data-toggle="collapse" data-target=".navbar-collapse.show"
如下所示在每个TAG中
<li class="nav-item">
<a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
</li>
答案 9 :(得分：0)
因为我使用 React Bootstrap，所以以上答案都没有帮助。在这种情况下，我必须创建一个状态来存储导航栏是折叠还是展开。
每当我切换/点击链接时，状态就会更新。
切换发生在我点击切换菜单本身时。
每当我点击一个链接时，就会发生关闭。
这是一个执行相同操作的代码片段：
function Navigation() {
const [expanded, setExpanded] = useState(false);
const navToggle = () => {
setExpanded(expanded ? false : true);
};
const closeNav = () => {
setExpanded(false);
};
return (
<React.Fragment>
<Navbar expand="lg" expanded={expanded}>
<Container>
<Navbar.Brand as={Link} to="/" onClick={closeNav}>
Site Header
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" onClick={navToggle} />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link to="/link1" onClick={closeNav}>
Link 1
</Nav.Link>
<Nav.Link to="/link2" onClick={closeNav}>
Link 2
</Nav.Link>
<Nav.Link to="/link3" onClick={closeNav}>
Link 3
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</React.Fragment>
);
}
答案 10 :(得分：-1)
您可以在点击和关闭时使用简单绑定，例如：(click)="drawer.close()
<a class="nav-link" [routerLink]="navItem.link" routerLinkActive="selected" (click)="drawer.close()">