Bagaimana Saya Membuat Navbar Boleh Dilipat Saya Ditutup Secara Automatik pada Klik Pautan dalam Bootstrap?-tutorial css-php.cn

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

Patricia Arquette

Lepaskan： 2024-12-15 22:43:26

asal

397 orang telah melayarinya

How Do I Make My Collapsible Navbar Automatically Close on Link Click in 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>

Salin selepas log masuk

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');
});

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!