Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menutup Navbar Boleh Dilipat Bootstrap 3 dengan Klik Luaran?

Bagaimana untuk Menutup Navbar Boleh Dilipat Bootstrap 3 dengan Klik Luaran?

Susan Sarandon
Lepaskan: 2024-11-19 00:49:02
asal
928 orang telah melayarinya

How to Close a Bootstrap 3 Collapsible Navbar with External Clicks?

Menutup Navbar Boleh Dilipat dengan Klik Luaran dalam Bootstrap 3

Meningkatkan pengalaman pengguna togol navbar melibatkan keupayaan untuk menutup bar navigasi terbuka apabila mengklik di luar sempadannya. Kod yang disediakan cuba menangani perkara ini dengan menggunakan pendengar acara document.click. Walau bagaimanapun, pelaksanaan pada masa ini gagal dalam mencapai kefungsian yang diingini.

Penyelesaian:

Coretan kod berikut secara berkesan menyelesaikan isu dengan memantau klik seluruh dokumen. Ia memeriksa sama ada elemen yang diklik terletak dalam elemen navbar. Jika navbar dibuka (ditentukan oleh kehadiran kelas "navbar-collapse in") dan elemen yang diklik tidak mempunyai kelas "navbar-togol", acara klik mencetuskan klik pada butang navbar-togol, dengan berkesan meruntuhkan bar navigasi.

$(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();
        }
    });
});
Salin selepas log masuk

Pendekatan ini menggabungkan kedua-dua keanggunan dan kefungsian, memberikan penutupan lancar bar navigasi terbuka apabila klik di luarnya.

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

sumber:php.cn
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan