Bootstrap menutup menu responsif "saat diklik"

86

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?

masukkan deskripsi gambar di sini

javascript  html  css  twitter-bootstrap 
— pengguna1040259
sumber
Bisakah Anda memposting beberapa HTML? Apakah Anda juga menggunakan Bootstrap untuk fungsi sembunyikan? Atau apakah Anda mencoba menerapkan sesuatu milik Anda sendiri?
— Kris Hollenbeck
Saya hanya mencoba melakukan sesuatu yang sederhana, saya pikir. Saya hanya ingin menutup
— bilah navigasi
Jika Anda tidak ingin mencoba dan membandingkan semua solusi ini di sini sendiri, edit # 1 dari jawaban ini adalah apa yang harus Anda lakukan.
— gak
Saya merekomendasikan untuk menggulir sedikit ke bawah dan melihat jawaban @LukeTillman. Bekerja dengan sempurna dan tanpa jQuery. :)
— das Keks

Jawaban:

103

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');
     });
 });
— mollwe
sumber
3
Jika tidak semua aelemen: Anda hanya perlu menelepon$("#nav-main").collapse('hide');
— Ankit Jain
@mollwe Apakah Anda memiliki solusi saat memiliki menu tarik-turun? Saya membuat jsfiddle untuk mencoba tetapi bahkan menunya tidak terbuka. jsfiddle.net/Y3H92
— clankill3r
@ clankill3r menurut saya ada referensi ke bootstrap.js yang hilang dan karena itu menu tidak berfungsi. Saya memperbarui jsfiddle Anda: jsfiddle.net/Y3H92/1
— mollwe
@mollwe dengan biola Anda menu tidak akan menutup sama sekali untuk saya.
— clankill3r
1
Maaf atas tanggapan yang terlambat @ clankill3r! Tapi lebih baik terlambat daripada tidak sama sekali. jsfiddle.net/mollwe/Y3H92/5
— mollwe
138

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.

— Jake Taylor
sumber
14
yang menyebabkan kedipan dan hal-hal aneh saat navigasi tidak ditampilkan sebagai menu "responsif".
— Florian
5
Ini adalah implementasi yang benar. Tidak perlu jQuery kustom.
— larrylampco
saya menghapus suara negatif saya pada jawaban ini dan komentar saya sebelumnya (juga karena video itu tidak berfungsi lagi). karena komentar saya tentang kedipan masih berlaku untuk jawaban asli, mendapat beberapa suara positif dan "edit" Anda ditandai dengan jelas. Saya tidak melihat alasan untuk menghapusnya dan menulis ulang riwayat. itu valid pada saat itu dan Anda bereaksi sesuai dengan itu. orang yang membaca jawaban Anda akan melihat "edit" dan mengetahui bahwa Anda memperbaikinya ...
— Florian
1
Alih-alih menambahkan atribut data-toggleand data-targetke setiap elemen li, Anda bisa menambahkannya ke induk ulatau divtag.
— Jeremy Quick
1
@jrquick Ini benar..tapi seperti jawaban asli saya, Anda masih mendapatkan gangguan pada ukuran layar yang lebih besar saat mengklik tautan dengan metode ini. Jika Anda telah menemukan cara untuk menghilangkan ini, maka posting biola dan saya akan memperbarui jawaban saya sesuai.
— Jake Taylor
40

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();
            });
    });
— Hontoni
sumber
3
Harus menjadi jawaban yang diterima. Yang lainnya direkayasa secara berlebihan dan berkedip pada tampilan yang tidak responsif.
— rybo111
3
Ini bisa menjadi jawaban yang diterima tetapi tidak memperhitungkan sub menu dan bahkan melanggarnya. Beberapa solusi "rekayasa berlebihan" lainnya memang memperhitungkan hal ini, meskipun ada kekurangannya. Penambahan berikut akan menangani ini: $ (function () {$ ('. Navbar-collapse ul li a: not (.dropdown-toggle)'). Click (function () {$ ('. Navbar-toggle: terlihat '). klik ();});});
— Ed Bishop
bagus, terima kasih untuk EDIT Anda!
— Hontoni
1
Saya pikir touchstart agak berlebihan, klik berfungsi dengan baik. bagaimana responsnya terhadap geser saat Anda "mulai" dari tombol?
— Hontoni
37

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.

— Luke Tillman
sumber
3
Ini juga merupakan implementasi terbaik bagi saya.
— huijing
Untuk beberapa alasan ScrollSpy saya rusak dengan metode ini, tetapi berfungsi dengan baik dengan metode Jake Taylor.
— Inkling
Jawaban terbaik dan paling sederhana sejauh ini.
— Diaa
Telah mencoba untuk membuat keruntuhan non-flicker berfungsi untuk sementara waktu, tetapi sejauh ini solusi yang paling sederhana dan elegan. Terima kasih!
— McVenco
10

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>
— vidriduch
sumber
5

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

— Douglas 'DK' Knudsen
sumber
Solusi yang tepat dengan mengandalkan fungsionalitas bawaan Bootstrap; tidak ada jQuery atau javascript tambahan. Dan solusi paling sederhana dari semuanya. Ini harus menjadi jawaban yang diterima.
— Sergi Papaseit
4

Ini berfungsi, tetapi tidak bernyawa.

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
— pengguna1040259
sumber
8
Agak mengejutkan bahwa tidak ada opsi konfigurasi untuk ini karena menutup klik akan menjadi default yang lebih baik.
— bchesley
3

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

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);
— Jason Swingen
sumber
3

solusi ini berfungsi dengan baik, di desktop dan seluler.

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">
— bp002
sumber
bekerja untuk saya saat menggunakan navbar-id sebagai data-target: <div id = "navbar" class = "collapse navbar-collapse" data-toggle = "collapse" data-target = "# navbar"> tetapi memberikan animasi yang jelek sementara dalam ukuran desktop
— wutzebaer
Sangat jelek, tidak bisa diterima!
— candlejack
2

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

— CharlesA
sumber
2

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>
— Kyle
sumber
Sepertinya Anda meletakkan direktif di atr kelas, benar?
— Gringo Suave
Di dalam fungsi tautan berikut ini seharusnya berfungsi. element.on ('klik', function () {scope.vm.isCollapsed =! scope.vm.isCollapsed;});
— JimmyBob
2

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.

— Jussi Järviö
sumber
Bisakah Anda menjelaskan jawabannya lebih detail?
— Blunderfest
Bukankah itu jQuery? Bukankah umumnya praktik yang buruk untuk menggunakan jQuery dan Angular?
— AlxVallejo
1

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

            });
— Arco Voltaico
sumber
1

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 :-)

— Ralph D.
sumber
1

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

    });
— Goutami
sumber
0

Anda bisa menggunakan 

ul.nav {
    display: none;
}

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

— Keris
sumber
2
Masalahnya, navigasi ini menyembunyikan navigasi saat ditampilkan "normal", bukan di menu responsif.
— Florian
0

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.

— Kingsley Ijomah
sumber
0

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();
    }
});
— Aamer Shahzad
sumber
0

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();
    }
})
— Muhammad Bilal
sumber
-1 
$('.navbar-toggle').trigger('click');
— Aqib
sumber
Saya tidak mengerti mengapa ini bukan jawaban yang benar? setiap kali Anda mengklik salah satu tautan menu pada acara klik itu, Anda dapat beralih menu yang menurut saya adalah cara yang benar karena saya tidak mengubah perilaku default dari menu buka atau tutup.
— Aqib
-1

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>
Luaskan cuplikan

— kiranvj
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.