Pertanyaan Bootstrap menutup menu responsif "saat klik"


Pada "PRODUK" klik saya geser div putih (seperti yang terlihat di terlampir). Ketika dalam responsif (ponsel dan tablet), saya ingin menutup navbar responsif secara otomatis dan hanya menampilkan bilah putih.

Saya mencoba:

$('.btn-navbar').click();  

juga mencoba:

$('.nav-collapse').toggle();

Dan itu berhasil. Namun dalam ukuran desktop, itu juga disebut dan melakukan sesuatu yang funky ke menu yang menyusut sedetik.

Ada ide?

enter image description here


74
2018-01-07 20:10


asal


Jawaban:


Saya ingin bekerja dengan animasi!

Menu di html:

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

Binding click event pada semua elemen di navigasi untuk menutup menu (Bootstrap collapse plugin):

 $(function(){ 
     var navMain = $("#nav-main");
     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });

EDIT Untuk membuatnya lebih umum kita dapat menggunakan potongan kode berikut

 $(function(){ 
     var navMain = $(".navbar-collapse"); // avoid dependency on #id
     // "a:not([data-toggle])" - to avoid issues caused
     // when you have dropdown inside navbar
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

83
2018-06-26 10:09



Anda tidak perlu menambahkan javascript ekstra apa pun yang sudah disertakan dengan opsi bootstraps collapse. Sebagai gantinya, cukup masukkan pemilih pemilih data dan target data pada item daftar menu seperti yang Anda lakukan dengan tombol navbar-toggle. Jadi untuk item menu Produk Anda akan terlihat seperti ini

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Kemudian Anda harus mengulang pemilih data dan pemilih target data untuk setiap item menu

EDIT !!! Untuk memperbaiki masalah luapan dan berkedip pada perbaikan ini saya menambahkan beberapa kode lagi yang akan memperbaiki ini dan masih belum memiliki javascript tambahan. Ini kode baru:

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Ini di tempat kerja http://jsfiddle.net/jaketaylor/84mqazgq/

Ini akan membuat toggle Anda dan menargetkan selektor khusus untuk ukuran layar dan menghilangkan gangguan pada menu yang lebih besar. Jika ada yang masih mengalami masalah dengan glitches tolong beri tahu saya dan saya akan mencari perbaikan. Terima kasih


121
2018-02-13 02:29



Saya pikir Anda seluruh rekayasa ..

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

EDIT: Untuk menjaga sub menu, pastikan anchor toggle mereka memiliki kelas dropdown-toggle di atasnya.

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

EDIT 2: Tambahkan dukungan untuk sentuhan telepon.

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

37
2018-04-19 14:59



Saya sangat menyukai ide Jake Taylor untuk melakukannya tanpa JavaScript tambahan dan memanfaatkan pergantian Bootstrap. Saya menemukan Anda dapat memperbaiki masalah "kedip-kedip" saat menu tidak dalam mode runtuh dengan memodifikasi data-target pemilih sedikit untuk memasukkan in kelas. Jadi terlihat seperti ini:

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>

Saya tidak mengujinya dengan dropdown / menu yang bersarang, jadi YMMV.


33
2017-09-20 23:36



Ini berfungsi, tetapi tidak bernyawa.

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

4
2018-01-07 22:27



Saya mengasumsikan Anda memiliki garis seperti ini mendefinisikan area nav, berdasarkan contoh Bootstrap dan semuanya

<div class="nav-collapse collapse" >

Cukup tambahkan properti seperti itu, seperti pada tombol MENU

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

Saya telah menambahkan ke <body> juga, bekerja. Saya tidak bisa mengatakan saya telah mem-profil-nya atau apa pun, tetapi tampaknya memperlakukan saya ... sampai Anda mengklik pada tempat acak dari UI untuk membuka menu, jadi tidak begitu baik.

DK


4
2018-06-21 19:37



hanya untuk menjadi lengkap, dalam menggunakan Bootstrap 4.0.0 beta .menunjukkan bekerja untukku ...

<li>
  <a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>

4
2017-08-22 13:15



Dalam HTML saya menambahkan kelas nav-link ke Sebuah tag setiap tautan navigasi.

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);

3
2018-04-20 18:12



solusi ini memiliki pekerjaan yang baik, di desktop dan seluler.

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">

3
2017-12-12 14:28



Sekedar mengeja solusi user1040259, tambahkan kode ini ke $ (dokumen) Anda .ready (function () {});

    $('.nav').click( function() {
        $('.btn-navbar').addClass('collapsed');
        $('.nav-collapse').removeClass('in').css('height', '0');
    });

Seperti yang mereka sebutkan, ini tidak menggerakkan langkah ... tapi itu tidak menutup bar nav pada pemilihan item


2
2018-06-20 13:15



Bagi yang menggunakan AngularJS dan Angular UI Router dengan ini, inilah solusi saya (menggunakan toggle mollwe). Di mana ".navbar-main-collapse" adalah "target data" saya.

Buat direktif:

module.directive('navbarMainCollapse', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'C',
        link: function (scope, element) {
            //watch for state/route change (Angular UI Router specific)
            $rootScope.$on('$stateChangeSuccess', function () {
                if (!element.hasClass('collapse')) {
                    element.collapse('hide');
                }
            });
        }
    };
}]);

Gunakan Directive:

<div class="collapse navbar-collapse navbar-main-collapse">
    <your menu>

2
2017-11-20 17:38