Bagaimana Saya Membuat Navbar Boleh Dilipat Saya Ditutup Secara Automatik pada Klik Pautan dalam Bootstrap?

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