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
sumber
<span class="navbar-toggler-icon"></span>
untuk bilah ikon di BS 4.navbar-inverse
di Navbar untuk mengubah semua warna teks menjadi putih (atau putih transparan)data-toggle
dandata-target
ke elemen induk (li
), sebaliknya, scrollspy tidak akan berfungsi. Mungkin Anda harus mengedit jawaban Anda. :)Saya menggunakan ANGULAR dan karena itu memberi saya masalah, routerLink cukup tambahkan data-toggle dan target di tag li .... atau gunakan jquery seperti "ZimSystem"
sumber
data-toggle="collapse" data-target=".navbar-collapse.show"
ke li termasuk dropdown li.Anda dapat memanggil
$.collapse('hide');
dengan event handler di tautan.sumber
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.
sumber
$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
ini adalah solusi untuk menutup menu saat mengklik jangkar lalu terapkan baris ini di item daftar
contoh nyata yang berhasil untuk saya ada di bawah
sumber
Saya menggunakan Angular 5 dengan Boostrap 4. Cara ini bekerja untuk saya.
sumber
Cara termudah untuk melakukannya hanya dengan menggunakan template Angular 2/4 tanpa coding:
sumber
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.
sumber
Anda dapat menggunakan ikatan sederhana pada klik dan tutup, seperti ini:
(click)="drawer.close()
sumber