


Bagaimana Saya Membuat Navbar Boleh Dilipat Saya Ditutup Secara Automatik pada Klik Pautan dalam Bootstrap?
Dec 15, 2024 pm 10:43 PMNavbar Collapsible Ditutup Secara Automatik pada Klik Pautan
Anda telah mencipta navbar boleh lipat berfungsi menggunakan Bootstrap 4. Walau bagaimanapun, anda mahukannya untuk menutup secara automatik apabila pengguna memilih pautan. Artikel ini menyediakan penyelesaian komprehensif untuk Bootstrap 3 dan Bootstrap 4 untuk mencapai tingkah laku yang diingini ini.
Penyelesaian untuk Bootstrap 3
Dalam Bootstrap 3, anda boleh mengubah suai pautan dalam bar navigasi untuk memasukkan atribut 'togol data'. Atribut ini mencetuskan gelagat runtuh apabila pautan diklik.
<ul class="navbar-nav mr-auto"> <li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show"> <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show"> <a class="nav-link" href="#about-us">About</a> </li> <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show"> <a class="nav-link" href="#pricing">Pricing</a> </li> </ul>
Penyelesaian ini menggunakan runtuh dan menunjukkan kelas untuk mengawal keterlihatan bar navigasi.
Penyelesaian untuk Bootstrap 4
Untuk Bootstrap 4, terdapat dua cara utama untuk mencapai "tutup pada kefungsian klik".
Pilihan 1: Kaedah jQuery
$('.navbar-nav>li>a').on('click', function() { $('.navbar-collapse').collapse('hide'); });
Pilihan 2: Kaedah JavaScript dengan Atribut Data
<ul class="navbar-nav me-auto"> <li class="nav-item active" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show"> <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show"> <a class="nav-link" href="#about-us">About</a> </li> <li class="nav-item" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show"> <a class="nav-link" href="#pricing">Pricing</a> </li> </ul>
Penyelesaian untuk Bootstrap 5
Untuk Bootstrap 5, anda boleh menggunakan sama ada kaedah JavaScript dengan pendengar acara atau kaedah atribut data.
Kaedah JavaScript dengan Pendengar Acara
const navLinks = document.querySelectorAll('.nav-item') const menuToggle = document.getElementById('navbarSupportedContent') const bsCollapse = bootstrap.Collapse.getOrCreateInstance(menuToggle, {toggle: false}) navLinks.forEach((l) => { if (menuToggle.classList.contains('show')) { // only fire on mobile l.addEventListener('click', () => { bsCollapse.toggle() }) } })
Kaedah Atribut Data
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse">
Atas ialah kandungan terperinci Bagaimana Saya Membuat Navbar Boleh Dilipat Saya Ditutup Secara Automatik pada Klik Pautan dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Menjadikan Peralihan Svelte Khas pertama anda

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Muat naik fail dengan multer di node.js dan ekspres

Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma)
