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

Rumah

hujung hadapan web

tutorial css

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

Dec 15, 2024 pm 10:43 PM

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.

&lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
  &lt;li class=&quot;nav-item active&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse.show&quot;&gt;
    &lt;a class=&quot;nav-link&quot; href=&quot;#home&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse.show&quot;&gt;
    &lt;a class=&quot;nav-link&quot; href=&quot;#about-us&quot;&gt;About&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse.show&quot;&gt;
    &lt;a class=&quot;nav-link&quot; href=&quot;#pricing&quot;&gt;Pricing&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

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&gt;li&gt;a').on('click', function() {
  $('.navbar-collapse').collapse('hide');
});

Salin selepas log masuk

Pilihan 2: Kaedah JavaScript dengan Atribut Data

&lt;ul class=&quot;navbar-nav me-auto&quot;&gt;
  &lt;li class=&quot;nav-item active&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;.navbar-collapse.show&quot;&gt;
    &lt;a class=&quot;nav-link&quot; href=&quot;#home&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;.navbar-collapse.show&quot;&gt;
    &lt;a class=&quot;nav-link&quot; href=&quot;#about-us&quot;&gt;About&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;.navbar-collapse.show&quot;&gt;
    &lt;a class=&quot;nav-link&quot; href=&quot;#pricing&quot;&gt;Pricing&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

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) =&gt; {
  if (menuToggle.classList.contains('show')) {  // only fire on mobile
    l.addEventListener('click', () =&gt; { 
      bsCollapse.toggle() 
    })
  }
})

Salin selepas log masuk

Kaedah Atribut Data

&lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
    &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="collapse navbar-collapse"&gt;

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn