Bagaimana untuk Menutup Navbar Bootstrap 3 Runtuh pada Klik Luar?

Menutup Navbar Runtuh apabila Klik Luar

Untuk mengetepikan bar navigasi yang runtuh apabila mengklik di luar kawasan yang ditetapkan dalam Bootstrap 3, penyelesaian berikut boleh dilaksanakan:

Tugasnya ialah untuk mewujudkan mekanisme yang mengesan klik pengguna di luar elemen navbar dan mencetuskan penutupan navbar. Percubaan awal menggunakan jQuery(document).click(function()) dan jQuery('.navbar').click(function()) gagal dalam mencapai matlamat ini.

Pendekatan yang diubah suai menggabungkan acara klik pendengar pada elemen dokumen:

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});

Dalam kod ini, klik atas menentukan elemen tempat klik berlaku. _opened memastikan sama ada navbar sedang runtuh dan terbuka. Kemudian, jika bar navigasi dibuka dan klik berlaku di luar butang togol, butang itu diklik secara atur cara, mencetuskan penutupan bar navigasi.

Penyelesaian ini melaksanakan animasi runtuh yang lancar dan menghentikan penyebaran peristiwa klik ke elemen asas, memastikan bar navigasi ditutup apabila klik di luar sempadannya.

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