Come nascondere la barra di navigazione pieghevole Bootstrap 4 al clic

110

Ho creato questa barra di navigazione pieghevole utilizzando Bootstrap 4 che funziona bene, ma vorrei che si chiudesse quando l'utente fa clic su un collegamento. Qualche modo per farlo? Grazie

barra di navigazione 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 per .icon-bar, poiché Bootstrap 4 non usa la classe icon-bar.

.navbar-toggler .icon-bar {
  margin: 7px;
  display: block;
  width: 22px;
  height: 1px;
  background-color: #cccccc;
  border-radius: 1px;
}
html  css  twitter-bootstrap  bootstrap-4  twitter-bootstrap-4 
— Rudi Thiel
fonte

Risposte:

174

Puoi aggiungere il collapsecomponente ai link in questo modo ..

<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 utilizzando il metodo "data-toggle"

Oppure , (forse un modo migliore) usa jQuery in questo modo ..

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

Demo utilizzando il metodo jQuery

Aggiornamento 2019 - Bootstrap 4

La barra di navigazione è cambiata, ma il metodo "chiudi dopo il clic" è sempre lo stesso:

https://codeply.com/go/nFDHoEqqJQ (metodo jQuery)
https://codeply.com/go/PqIBtz3HPL ( data-togglemetodo, vedi componente Bootstrap Collapse )

— Zim
fonte
2
Ciao, grazie per la risposta, ma quando lo faccio non comprime la barra di navigazione ma piuttosto l'elemento div a cui è collegato con scrollspy. Eventuali suggerimenti? Grazie
— Rudi Thiel
3
Ottimo .. e ricorda che puoi usare <span class="navbar-toggler-icon"></span>per le barre delle icone in BS 4.
— Zim
2
È possibile utilizzare navbar-inversenella barra di navigazione per modificare tutti i colori del testo in bianco (o bianco trasparente)
— Zim
3
@Zim - Devi invece impostare data-togglee data-targetsull'elemento genitore ( li), altrimenti scrollspy non funzionerà. Forse dovresti modificare la tua risposta. :)
— J. Sadi
1
Il suggerimento di @ J.Sadi ha reso questo lavoro per me. In caso contrario, i clic sul collegamento non hanno avuto effetto.
— totalhack
44

Sto usando ANGULAR e poiché mi ha dato problemi il routerLink aggiunge semplicemente il data-toggle e il target nel tag li .... o usa jquery come "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>
Espandi lo snippet

— Gesù38
fonte
4
Grazie, mi hai salvato la giornata !. Sto usando Angular 6 con bootstrap 4.1.3. Applicato data-toggle="collapse" data-target=".navbar-collapse.show"a li, incluso il menu a discesa li.
— apprendimento ...
2
Questa risposta è semplicemente pulita e superba!
— Nation Chirara
17

Puoi chiamare $.collapse('hide');con un gestore di eventi sui link.

$('.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>
Espandi lo snippet

— Michael Coker
fonte
9

Con la prova delle soluzioni di cui sopra, mi mancava una soluzione per gli interruttori a discesa, quindi ecco qui! Apre anche gli elementi del sottomenu.

Forse devi modificarlo un po 'se la tua classe di commutazione è diversa. 

$('.navbar-nav li a').on('click', function(){
    if(!$( this ).hasClass('dropdown-toggle')){
        $('.navbar-collapse').collapse('hide');
    }
});
— Hendrik Vlaanderen
fonte
1
Questo è più breve e forse più veloce:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
— James Wilkins
5

questa è la soluzione per chiudere il menu quando si fa clic sull'ancora, quindi applicare questa riga nella voce dell'elenco 

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

il vero esempio che funziona per me è di seguito

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

Sto usando Angular 5 con Boostrap 4. Per me funziona in questo modo.

 $(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>
Espandi lo snippet

— Pedro
fonte
2

Il modo più semplice per farlo utilizzando solo il modello Angular 2/4 senza codifica:

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

Questo codice simula un clic sul pulsante burguer per chiudere la barra di navigazione facendo clic su un collegamento nel menu, mantenendo l'effetto di dissolvenza in chiusura. Soluzione con dattiloscritto per angolare 7. Evitare problemi con 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
fonte
Le soluzioni proposte con jQuery non funzionano correttamente in Angular 7 con caricamento lazzy.
— edu
0

puoi usare semplicemente un binding al clic e chiudi, in questo modo: (click)="drawer.close()

<a class="nav-link" [routerLink]="navItem.link" routerLinkActive="selected" (click)="drawer.close()">
— Mihai Cristian
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.