Bagaimana untuk Meruntuhkan Navbar Bootstrap 3 pada Klik Luar?

Meruntuhkan Navbar Bootstrap 3 dengan Mengklik Di Luar Elemennya

Soalan: Bagaimanakah anda boleh meminimumkan bar navigasi Bootstrap 3 yang terbuka secara automatik apabila mengklik di luarnya sempadan? Secara lalai, anda hanya boleh membuka atau menutupnya melalui butang togol bar navigasi.

Contoh:

[Contoh dan Kod](pautan)

Percubaan Awal:

Kod yang diberikan tidak kerja:

jQuery(document).click(function() {

});

jQuery('.navbar').click(function(event) {
    jQuery(".navbar-collapse").collapse('hide');
    event.stopPropagation();
});

Penyelesaian:

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

Penjelasan:

Kod ini:

• Mendengar klik di mana-mana dalam dokumen.
• Menyemak sama ada navbar dibuka dan elemen yang diklik bukan butang navbar-togol.
• Jika kedua-dua syarat dipenuhi, ia mensimulasikan klik pada butang navbar-togol, dengan berkesan meruntuhkan navbar.

Pendekatan ini mengekalkan animasi navbar dan lebih mesra pengguna daripada menetapkan kelas CSS secara manual.

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