Cara menyembunyikan bilah navigasi Bootstrap 4 yang dapat dilipat saat diklik

110

Saya telah membuat navbar yang dapat dilipat ini menggunakan Bootstrap 4 yang berfungsi dengan baik, tetapi saya ingin menutupnya saat pengguna mengklik tautan. Ada cara untuk melakukan ini? Terima kasih

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>

css untuk .icon-bar, karena Bootstrap 4 tidak menggunakan kelas ikon-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
sumber

Jawaban:

174

Anda dapat menambahkan collapsekomponen ke tautan seperti ini ..

<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 menggunakan metode 'data-toggle'

Atau , (mungkin cara yang lebih baik) gunakan jQuery seperti ini ..

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

Demo menggunakan metode jQuery

Perbarui 2019 - Bootstrap 4

Bilah navigasi telah berubah, tetapi metode "tutup setelah klik" masih sama:

https://codeply.com/go/nFDHoEqqJQ (metode jQuery)
https://codeply.com/go/PqIBtz3HPL ( data-togglemetode, lihat komponen Bootstrap collapse )

— Zim
sumber
2
Hai, terima kasih atas balasannya, tetapi ketika saya melakukan ini, itu tidak menutup navbar melainkan elemen div yang ditautkan dengan scrollspy. Ada saran? Terima kasih
— Rudi Thiel
3
Bagus .. dan ingat, Anda dapat menggunakan <span class="navbar-toggler-icon"></span>untuk bilah ikon di BS 4.
— Zim
2
Anda dapat menggunakan navbar-inversedi Navbar untuk mengubah semua warna teks menjadi putih (atau putih transparan)
— Zim
3
@Zim - Anda harus menyetel data-toggledan data-targetke elemen induk ( li), sebaliknya, scrollspy tidak akan berfungsi. Mungkin Anda harus mengedit jawaban Anda. :)
— J. Sadi
1
Saran dari @ J.Sadi membuat ini berhasil untuk saya. Jika tidak, klik tautan tidak melakukan apa pun.
— totalhack
44

Saya menggunakan ANGULAR dan karena itu memberi saya masalah, routerLink cukup tambahkan data-toggle dan target di tag li .... atau gunakan jquery seperti "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>
Luaskan cuplikan

— Yesus 38
sumber
4
Terima kasih, Anda telah menyelamatkan hari ini untuk saya !. Saya menggunakan Angular 6 dengan bootstrap 4.1.3. Diterapkan data-toggle="collapse" data-target=".navbar-collapse.show"ke li termasuk dropdown li.
— belajar ...
2
Jawaban ini Just Clean & Superb!
— Nation Chirara
17

Anda dapat memanggil $.collapse('hide');dengan event handler di tautan.

$('.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>
Luaskan cuplikan

— Michael Coker
sumber
9

Dengan mencoba solusi di atas, saya kehilangan solusi untuk matikan Dropdown, jadi ini dia! Juga membuka item submenu.

Mungkin Anda harus sedikit mengubahnya jika kelas toggle Anda berbeda. 

$('.navbar-nav li a').on('click', function(){
    if(!$( this ).hasClass('dropdown-toggle')){
        $('.navbar-collapse').collapse('hide');
    }
});
— Hendrik Vlaanderen
sumber
1
Ini lebih pendek, dan mungkin lebih cepat:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
— James Wilkins
5

ini adalah solusi untuk menutup menu saat mengklik jangkar lalu terapkan baris ini di item daftar 

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

contoh nyata yang berhasil untuk saya ada di bawah

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

Saya menggunakan Angular 5 dengan Boostrap 4. Cara ini bekerja untuk saya.

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

— Pedro
sumber
2

Cara termudah untuk melakukannya hanya dengan menggunakan template Angular 2/4 tanpa coding:

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

Kode ini mensimulasikan klik pada tombol pencuri untuk menutup bilah navigasi dengan mengklik tautan di menu, menjaga efek fade out. Solusi dengan skrip ketikan untuk sudut 7. Hindari masalah 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
sumber
Solusi yang diusulkan dengan jQuery tidak berfungsi dengan benar di Angular 7 dengan lazzy loading.
— edu
0

Anda dapat menggunakan ikatan sederhana pada klik dan tutup, seperti ini: (click)="drawer.close()

<a class="nav-link" [routerLink]="navItem.link" routerLinkActive="selected" (click)="drawer.close()">
— Mihai Cristian
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.