Mengapa Bootstrap 3 Saya Navigasi Runtuh Kekal Terbuka Selepas Mengklik Pautan Menu?

Navigasi Runtuh Bootstrap 3 Kekal Terbuka selepas Mengklik Pautan Menu

Dalam persediaan navigasi Bootstrap 3 biasa, mengklik pada pautan menu dalam menu yang runtuh akan menyebabkan menu ditutup secara automatik. Walau bagaimanapun, sesetengah pengguna telah menghadapi isu di mana menu kekal terbuka selepas pemilihan pautan menu.

Memahami Masalah

Isu ini timbul kerana kelakuan lalai Bootstrap runtuh pemalam adalah untuk menogol keterlihatan elemen apabila butang pencetusnya diklik. Ini bermakna mengklik dalam menu yang diruntuhkan itu sendiri, termasuk pada pautan menu, tidak mencetuskan tindakan runtuh.

Penyelesaian

Untuk menyelesaikan masalah ini, pendengar acara JavaScript boleh ditambah pada dokumen. Pendengar ini mengesan apabila pengguna mengklik dalam navigasi yang runtuh dan menyembunyikannya secara automatik. Berikut ialah contoh kod:

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

Penjelasan

• $(document).on mengikat pendengar acara pada dokumen untuk klik pada elemen yang sepadan dengan pemilih .navbar-collapse.in. Ini memastikan acara dicetuskan hanya apabila navigasi runtuh.
• Syarat if menyemak sama ada elemen yang diklik (e.target) ialah sauh teg yang bukan togol lungsur turun (".dropdown-toggle"). Togol lungsur turun dikecualikan untuk mengelakkan menu runtuh apabila submenunya diakses.
• Jika syarat dipenuhi, kaedah runtuh('sembunyikan') dipanggil pada elemen yang diklik, yang meruntuhkan navigasi.

Penyelesaian ini memastikan menu yang runtuh ditutup secara automatik apabila pengguna mengklik pada pautan menu, memberikan kemudahan yang lancar dan pengalaman navigasi mesra pengguna.

Atas ialah kandungan terperinci Mengapa Bootstrap 3 Saya Navigasi Runtuh Kekal Terbuka Selepas Mengklik Pautan Menu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!