Bootstrap menutup menu responsif "saat diklik"

Pada "PRODUCTS" klik Saya menggeser div putih (seperti terlihat di terlampir). Saat dalam keadaan responsif (seluler 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?

Saya membuatnya bekerja dengan animasi!

Menu dalam 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 dalam navigasi untuk menciutkan menu (plugin Bootstrap collapse):

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

Anda tidak perlu menambahkan javascript tambahan apa pun ke apa yang sudah disertakan dengan opsi penciutan bootstraps. Sebagai gantinya, cukup sertakan pemilih data-toggle dan data-target pada item daftar menu Anda 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 perlu mengulangi pemilih data-toggle dan data-target untuk setiap item menu

EDIT !!! Untuk memperbaiki masalah overflow dan berkedip-kedip pada perbaikan ini, saya menambahkan beberapa kode lagi yang akan memperbaiki ini dan masih belum memiliki javascript tambahan. Ini kode barunya:

<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 dia di tempat kerja http://jsfiddle.net/jaketaylor/84mqazgq/

Ini akan membuat sakelar dan pemilih target Anda spesifik untuk ukuran layar dan menghilangkan gangguan pada menu yang lebih besar. Jika ada yang masih mengalami masalah dengan gangguan, beri tahu saya dan saya akan menemukan cara mengatasinya. Terima kasih

EDIT : Dalam bootstrap v4.1.3 saya tidak bisa menggunakan kelas yang terlihat / tersembunyi. Alih-alih hidden-xsdigunakan d-none d-sm-blockdan bukannya visible-xsdigunakan d-block d-sm-none.

Saya pikir Anda semua ahli teknik ..

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

EDIT: Untuk menangani sub menu, pastikan toggle anchor 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();
            });
    });

Saya sangat menyukai ide Jake Taylor untuk melakukannya tanpa JavaScript tambahan dan memanfaatkan tombol runtuh Bootstrap. Saya menemukan Anda dapat memperbaiki masalah "berkedip" yang ada saat menu tidak dalam mode diciutkan dengan data-targetsedikit memodifikasi selektor untuk menyertakan inkelas. 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 bersarang, jadi YMMV.

hanya untuk melengkapi, di Bootstrap 4.0.0-beta menggunakan .show berhasil untuk saya ...

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

Saya berasumsi Anda memiliki garis seperti ini yang menentukan area navigasi, 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. Tidak dapat mengatakan saya telah membuat profil atau apa pun, tetapi tampaknya memperlakukan saya ... sampai Anda mengklik tempat acak UI untuk membuka menu, jadi tidak begitu bagus.

DK

Ini berfungsi, tetapi tidak bernyawa.

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

Dalam HTML saya menambahkan kelas nav-link ke sebuah tag dari setiap link navigasi.

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

solusi ini berfungsi dengan baik, di desktop dan seluler.

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

Hanya untuk menjelaskan solusi user1040259, tambahkan kode ini ke $ (document) .ready (function () {});

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

Seperti yang mereka sebutkan, ini tidak menganimasikan gerakan ... tetapi menutup bilah navigasi pada pemilihan item

Bagi mereka yang menggunakan AngularJS dan Angular UI Router dengan ini, inilah solusi saya (menggunakan mollwe's toggle). Di mana ".navbar-main-collapse" adalah "data-target" 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 Petunjuk:

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

Ini seharusnya berhasil.

Membutuhkan bootstrap.js.

Contoh => http://getbootstrap.com/javascript/#collapse

    $('.nav li a').click(function() {
      $('#nav-main').collapse('hide');
    });

Ini melakukan hal yang sama seperti menambahkan atribut 'data-toggle = "collapse"' dan 'href = "yournavigationID"' ke tag menu navigasi.

Saya menggunakan fungsi mollwe, meskipun saya menambahkan 2 peningkatan:

a) Hindari penutupan dropdown jika link yang diklik sudah runtuh (termasuk link lain)

b) Sembunyikan juga dropdown, jika Anda mengklik konten web yang terlihat.

jQuery.fn.exists = function() {
                  return this.length > 0;
              }

    $(function() {
                var navMain = $(".navbar-collapse");
                navMain.on("click", "a", null, function() {
                    if ($(this).attr("href") !== "#") {
                        navMain.collapse('hide');
                    }
                });

                $("#content").bind("click", function() {
                     if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
                        navMain.collapse('hide');
                    }
                });

            });

Bukan utas terbaru tetapi saya mencari solusi untuk Masalah yang sama dan menemukan satu (campuran dari beberapa yang lain).

Saya memberikan NavButton:

<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

sebuah id / Identifier seperti:

 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Bukan "Ide" terbaik - tetapi: Cocok untuk saya! Sekarang Anda dapat memeriksa visibilitas tombol Anda (dengan jquery) seperti:

 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }

(CATATAN: Ini hanya Kode yang dipotong! Saya menggunakan Acara "onclick" di Tautan Nav saya! (Memulai Permintaan AJAX.)

Hasilnya adalah: Jika Tombol "terlihat" itu mendapat "diklik" ... Jadi: Tidak Ada Bug jika Anda menggunakan "Tampilan layar penuh" dari Bootstrap (lebar lebih dari 940px).

Salam Ralph

PS: Ini berfungsi dengan baik dengan IE9, IE10 dan Firefox 25. Tidak memeriksa yang lain - Tapi saya tidak bisa melihat Masalah :-)

Ini berhasil untuk saya. Saya telah melakukan seperti, ketika saya mengklik tombol menu, saya menambahkan atau menghapus kelas 'dalam' karena dengan menambahkan atau menghapus kelas itu sakelar berfungsi secara default. 'e.stopPropagation ()' adalah untuk menghentikan animasi default dengan bootstrap (saya kira) Anda juga dapat menggunakan 'toggleClass' sebagai pengganti kelas tambah atau hapus.

$ ('# ChangeToggle'). Pada ('klik', fungsi (e) {

        if ($('.navbar-collapse').hasClass('in')) {
            $('.navbar-collapse').removeClass('in');
            e.stopPropagation();
        } else {
            $('.navbar-collapse').addClass('in');
            $('.navbar-collapse').collapse();
        }

    });

Anda bisa menggunakan

ul.nav {
    display: none;
}

Ini secara default akan menutup navbar. Tolong beritahu saya jika ada orang yang menganggap ini berguna

Jika misalnya ikon toggle -able Anda hanya terlihat untuk perangkat ekstra kecil, maka Anda dapat melakukan sesuatu seperti ini:

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

Mengklik [data-toggle = "offcanvas"] akan menambahkan bootstrap's .hidden-xs ke menu sisi # saya yang akan menyembunyikan konten menu samping, tetapi akan terlihat lagi jika Anda memperbesar ukuran jendela.

jika menu html adalah

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

on nav toggle 'in' class ditambahkan dan dihapus dari toggle. periksa apakah menu responsif dibuka kemudian lakukan sakelar tutup.

$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

Tuggle Nav Close, jawaban yang kompatibel dengan browser IE, tanpa kesalahan konsol. Jika Anda menggunakan bootstrap, gunakan ini

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})

$('.navbar-toggle').trigger('click');

Solusi bootstrap 4 tanpa Javascript

Tambahkan atribut data-toggle="collapse" data-target="#navbarSupportedContent.show" ke div<div class="collapse navbar-collapse">

Pastikan Anda memberikan yang benar iddidata-target

<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">

.show adalah untuk menghindari menu berkedip dalam resolusi besar

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>