Bagaimana untuk Menutup Navbar Bootstrap Boleh Dilipat pada Klik Pautan?

Menutup Navbar Bootstrap Boleh Dilipat pada Klik

Bootstrap 5 (beta)

• Gunakan JavaScript untuk menambah pendengar acara pada item menu yang menutup Runtuhkan navbar.

Bootstrap 4

• Tambahkan komponen runtuh pada pautan menggunakan togol data atau gunakan jQuery untuk kawalan.

Boottrap 3

• Sertakan komponen runtuh dalam pautan menggunakan togol data, atau gunakan jQuery untuk menyembunyikan bar navigasi pada klik pautan.

Berikut ialah penyelesaian terperinci untuk Bootstrap 3:

penanda:

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

jQuery:

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

Kaedah ini akan menyembunyikan navbar boleh lipat selepas pautan diklik, meningkatkan pengalaman pengguna dan aliran navigasi.

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