Bagaimana untuk Menutup Menu Bootstrap 3 Runtuh pada Klik Pautan?

Cara Menutup Menu Bootstrap 3 Runtuh pada Klik Pautan

Menu navigasi Bootstrap 3 yang runtuh menyediakan cara mudah untuk menyembunyikan dan memaparkan item navigasi pada peranti yang lebih kecil. Walau bagaimanapun, mengklik pada pautan menu semasa menu dikembangkan mungkin tidak menutupnya apabila diklik. Ini boleh mengecewakan pengguna kerana ia menghalang navigasi mudah.

Penyelesaian

Untuk menangani isu ini, anda boleh menambahkan kod berikut pada dokumen anda:

$(document).on('click', '.navbar-collapse.in', function(e) {
  if ($(e.target).is('a:not(".dropdown-toggle")')) {
    $(this).collapse('hide');
  }
});

Kod ini akan mendengar klik dalam menu yang diruntuhkan dan menutup menu jika elemen sasaran bukan togol lungsur turun. Dengan mengecualikan togol lungsur turun, anda memastikan bahawa mengklik pada menu lungsur itu sendiri tidak menutupnya.

Pelaksanaan

Untuk melaksanakan penyelesaian ini, anda boleh memasukkan kod dalam anda fail JavaScript atau tambahkannya terus ke bahagian bawah halaman sebelum penutup tag.

Nota Tambahan

• Penyelesaian asal daripada GitHub, yang hanya menyemak sama ada sasaran ialah elemen 'a', boleh menyebabkan masalah dengan sub- menu. Versi yang dikemas kini menyemak 'a:not(".dropdown-toggle")' sebaliknya untuk mengelakkan perkara ini.
• Penyelesaian ini hanya terpakai pada Bootstrap 3.x. Untuk Bootstrap 4 dan ke atas, kelas .in telah digantikan dengan .show.

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