Bagaimana untuk Menutup Navbar Bootstrap Secara Automatik Selepas Mengklik Pautan?

Cara Menutup Navbar Bootstrap pada Klik Pautan

Masalah:

Anda mempunyai bar navigasi Bootstrap yang runtuh pada peranti mudah alih , tetapi anda mahu ia ditutup apabila pengguna mengklik pada pautan.

Penyelesaian:

Bootstrap 5 (beta)

• Kaedah JavaScript: Tambah pendengar acara klik pada item menu untuk menogol bar navigasi runtuh.

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: Tambahkan atribut data-bs-toggle="collapse" dan data-bs-target=".navbar-collapse.show" kepada pautan.

<nav>
    <ul>
        <li>
            <a href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
        </li>
        ...
    </ul>
</nav>

Bootstrap 4

• Kaedah jQuery: Gunakan kaedah runtuh pada elemen navbar-runtuh.

<ul class="navbar-nav mr-auto">
    <li data-toggle="collapse" data-target=".navbar-collapse.show">
        <a href="#home">Home</a>
    </li>
    ...
</ul>

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

• Kaedah Atribut Data: Tambah data-toggle="collapse" dan data-target=".navbar-collapse.show" atribut kepada pautan.

<ul>
    <li>
        <a href="#" data-toggle="collapse" data-target=".navbar-collapse.show">Home</a>
    </li>
    ...
</ul>

Bootstrap 3

• Atribut Data Kaedah: Tambah data-toggle="collapse" dan data-target=".navbar-collapse.show" atribut kepada pautan.

<ul>
    <li data-toggle="collapse" data-target=".navbar-collapse.show">
        <a href="#home">Home</a>
    </li>
    ...
</ul>

• Kaedah jQuery: Gunakan kaedah runtuh pada elemen navbar-runtuh.

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

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