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

108

Creé esta barra de navegación plegable usando Bootstrap 4 que funciona muy bien, pero me gustaría que se cierre cuando el usuario hace 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;
}
Rudi Thiel
fuente

Respuestas:

170

Puede agregar el collapsecomponente a los enlaces de esta manera ...

<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 usando el método 'alternar datos'

O , (quizás una mejor manera) use jQuery así ...

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

Demostración 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://codeply.com/go/nFDHoEqqJQ (método jQuery)
https://codeply.com/go/PqIBtz3HPL ( data-togglemétodo, consulte el componente Bootstrap Collapse )

Zim
fuente
1
Hola, gracias por la respuesta, pero cuando hago esto no colapsa la barra de navegación, sino el elemento div al que está vinculado con scrollspy. ¿Alguna sugerencia? Gracias
Rudi Thiel
3
Genial ... y recuerda que puedes usar <span class="navbar-toggler-icon"></span>para las barras de iconos en BS 4.
Zim
2
Puede usar navbar-inverseen la barra de navegación para cambiar todos los colores del texto a blanco (o blanco transparente)
Zim
3
@Zim: debe establecer data-toggley data-targeten el elemento principal ( li); de lo contrario, scrollspy no funcionará. Quizás deberías editar tu respuesta. :)
J. Sadi
1
La sugerencia de @ J.Sadi hizo que esto funcionara para mí. De lo contrario, los clics en el enlace no hicieron nada.
totalhack
44

Estoy usando ANGULAR y dado que me dio problemas, el routerLink simplemente agregue el cambio de datos y el objetivo en la etiqueta li ... o use 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>

Jesús38
fuente
4
Gracias, ¡me has salvado el día !. Estoy usando Angular 6 con bootstrap 4.1.3. Se aplica data-toggle="collapse" data-target=".navbar-collapse.show"a li, incluido el menú desplegable li.
aprendiendo ...
2
¡Esta respuesta es simplemente limpia y excelente!
Nation Chirara
17

Puede llamar $.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;
}
<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>

Michael Coker
fuente
9

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

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

$('.navbar-nav li a').on('click', function(){
    if(!$( this ).hasClass('dropdown-toggle')){
        $('.navbar-collapse').collapse('hide');
    }
});
Hendrik Vlaanderen
fuente
1
Esto es más corto y posiblemente más rápido:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
James Wilkins
5

esta es la solución para cerrar el menú cuando haga clic en el ancla y luego aplique esta línea en el elemento de la lista

     data-target="#sidenav-collapse-main" data-toggle="collapse"

el ejemplo real que me funciona está abajo

      <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>
abubakkar tahir
fuente
2

Estoy usando Angular 5 con Boostrap 4. Me funciona 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>

Pedro
fuente
2

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>
donmutti
fuente
2

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 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>
edu
fuente
Las soluciones propuestas con jQuery no funcionan correctamente en Angular 7 con carga diferida.
edu
0

Puedes usar un simple enlace al hacer clic y cerrar, como este: (click)="drawer.close()

<a class="nav-link" [routerLink]="navItem.link" routerLinkActive="selected" (click)="drawer.close()">
Mihai Cristian
fuente