[html] 클릭시 접을 수있는 Bootstrap 4 navbar를 숨기는 방법
잘 작동하는 Bootstrap 4를 사용하여 접을 수있는 navbar를 만들었지 만 사용자가 링크를 클릭하면 닫히고 싶습니다. 이 작업을 수행 할 방법이 있습니까? 감사
html navbar :
<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>
.icon-bar의 경우 Bootstrap 4가 icon-bar 클래스를 사용하지 않기 때문입니다.
.navbar-toggler .icon-bar {
margin: 7px;
display: block;
width: 22px;
height: 1px;
background-color: #cccccc;
border-radius: 1px;
}
답변
다음 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>
또는 (아마도 더 나은 방법) jQuery를 다음과 같이 사용하십시오 ..
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
2019 업데이트-부트 스트랩 4
navbar가 변경되었지만 “클릭 후 닫기”방법은 여전히 동일합니다.
https://codeply.com/go/nFDHoEqqJQ(jQuery 메서드)
https://codeply.com/go/PqIBtz3HPL ( data-toggle메서드, Bootstrap Collapse 구성 요소 참조 )
답변
나는 ANGULAR를 사용하고 있고 그것이 나에게 문제를 주었기 때문에 routerLink는 li 태그에 data-toggle과 target을 추가합니다 …. 또는 “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>답변
$.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>답변
위의 솔루션을 시도하면서 드롭 다운 토글에 대한 솔루션이 누락되었으므로 여기에 있습니다! 하위 메뉴 항목도 엽니 다.
토글 클래스가 다른 경우 약간 조정해야 할 수도 있습니다.
$('.navbar-nav li a').on('click', function(){
if(!$( this ).hasClass('dropdown-toggle')){
$('.navbar-collapse').collapse('hide');
}
});
답변
앵커를 클릭하면 메뉴를 닫고 목록 항목에이 줄을 적용하는 솔루션입니다.
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>
답변
저는 Boostrap 4와 함께 Angular 5를 사용하고 있습니다. 이런 방식으로 저에게 효과적입니다.
$(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>답변
코딩없이 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>