Bagaimana untuk Menutup Navbar Bootstrap Boleh Dilipat Secara Automatik Selepas Klik Pautan?

Cara Menyembunyikan Navbar Bootstrap 4 Boleh Dilipat pada Klik

Masalah:

Anda telah mencipta bar navigasi Bootstrap boleh lipat yang dibuka dengan lancar, tetapi ia tetap terbuka walaupun selepas menavigasi kepada bahagian yang berbeza. Anda mahu ia ditutup secara automatik apabila pengguna mengklik pada pautan.

Penyelesaian:

Bootstrap 5 (Beta):

Menggunakan JavaScript:

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() 
        })
    }
})

Menggunakan Atribut Data:

<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>

Bootstrap 4:

Menggunakan jQuery:

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

Menggunakan Atribut Data:

<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>

Bootstrap 3:

Menggunakan jQuery:

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

Menggunakan Atribut Data:

<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Link</a>

Dengan melaksanakan mana-mana kaedah ini, navbar Bootstrap anda yang boleh dilipat akan ditutup apabila pengguna mengklik pada pautan, memberikan pengalaman navigasi yang lancar dan mesra pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Menutup Navbar Bootstrap Boleh Dilipat Secara Automatik Selepas Klik Pautan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!