Bagaimana untuk Menutup Navbar Bootstrap pada Klik Luaran?

Menutup Navbar Terbuka pada Klik Luaran Menggunakan Bootstrap

Apabila bekerja dengan navbar yang runtuh dalam Bootstrap 3, adalah berguna untuk dapat menutup dengan mengklik di luar kawasan navbar. Untuk mencapai matlamat ini, anda boleh menggunakan kod JavaScript berikut:

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

Kod ini memantau semua klik dokumen. Apabila ia mengesan klik di luar elemen navbar (seperti yang ditentukan oleh pembolehubah klik), ia menyemak sama ada navbar sedang dibuka (_opened). Jika bar navigasi dibuka dan elemen yang diklik bukan butang "togol bar navigasi", ia mencetuskan klik pada butang togol, dengan berkesan menutup bar navigasi.

Coretan kod yang anda berikan tidak berfungsi kerana ia berfungsi. jangan semak untuk melihat sama ada navbar sudah terbuka sebelum cuba menutupnya. Selain itu, ia menggunakan jQuery('.navbar').click(...), yang juga akan melancarkan klik dalam navbar, menghalang klik luaran daripada menutupnya.

Dengan menggunakan kod diubah suai yang disediakan dalam jawapan, anda boleh memastikan bahawa bar navigasi terbuka ditutup apabila anda mengklik di luar bar itu, meningkatkan pengalaman pengguna dan aliran navigasi.

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