html - ejemplos - bootstrap español

Cómo ocultar la barra de navegación de Bootstrap 4 plegable al hacer clic (7)

Al probar las soluciones anteriores, me faltaba una solución para alternar el menú desplegable, ¡así que aquí tienes! También abre elementos de submenú.

Tal vez tengas que modificarlo un poco si tu clase de alternar es diferente.

$(''.navbar-nav li a'').on(''click'', function(){ if(!$( this ).hasClass(''dropdown-toggle'')){ $(''.navbar-collapse'').collapse(''hide''); } });

He creado esta barra de navegación plegable con Bootstrap 4 que funciona bien, pero me gustaría que se cierre cuando el usuario haga clic en un enlace. Alguna forma de hacer esto? Gracias

barra de navegación 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 para .icon-bar, ya que Bootstrap 4 no usa la clase icon-bar.

.navbar-toggler .icon-bar { margin: 7px; display: block; width: 22px; height: 1px; background-color: #cccccc; border-radius: 1px; }

Este código simula un clic en el botón burguer para cerrar la barra de navegación haciendo clic en un enlace en el menú, manteniendo el efecto de desvanecimiento. Solución con mecanografiado para angular 7. Evite los problemas de 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>

Estoy usando ANGULAR y, dado que me dio problemas, el routerLink solo agrega el conmutador de datos y el objetivo en la etiqueta li ... o usa jquery como "ZimSystem"

<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>

Estoy usando Angular 5 con Boostrap 4. Funciona para mí de esta manera.

$(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>

La forma más fácil de hacerlo usando solo la plantilla Angular 2/4 sin codificación:

<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>

Puede agregar el componente de collapse a los enlaces como este ...

<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>

Demostración utilizando el método de ''alternar datos''

O , (quizás una mejor manera) use jQuery de esta manera ...

$(''.navbar-nav>li>a'').on(''click'', function(){ $(''.navbar-collapse'').collapse(''hide''); });

Demo usando el método jQuery

Actualización 2019 - Bootstrap 4

La barra de navegación ha cambiado, pero el método "cerrar después de hacer clic" sigue siendo el mismo:

https://www.codeply.com/go/nFDHoEqqJQ (método jQuery)
https://www.codeply.com/go/PqIBtz3HPL (método de data-toggle )

Puedes llamar a $.collapse(''hide''); con un controlador de eventos en los enlaces.

$(''.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; }