Bootstrap 3 menu yang diciutkan tidak menutup saat diklik

122

Saya memiliki navigasi standar yang kurang lebih dari bootstrap 3

<body data-spy="scroll" data-target=".navbar-collapse">
    <!-- ---------- Navigation ---------- -->
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="index.html"> <img src="#"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#one">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#three">Three</a></li>
                    <li><a href="#four">Four</a></li>
                </ul>
            </div>
        </div>
    </div>

Biasanya runtuh pada perangkat yang lebih kecil. Mengklik tombol menu akan memperluas menu, tetapi jika saya mengklik (atau menyentuh) pada link menu, menu tetap terbuka. Apa yang harus saya lakukan, menutupnya lagi?

html  css  twitter-bootstrap  navigation 
— Paranoia
sumber
5
jawaban pengguna3669917 tentu saja merupakan jawaban termudah dan paling langsung!
— Thomas
1
— Inanc Gumus

Jawaban:

48

Pengaturan default Bootstrap adalah untuk membuat menu tetap terbuka saat Anda mengklik item menu. Anda dapat mengganti perilaku ini secara manual dengan memanggil .collapse('hide');elemen jQuery yang ingin Anda tutup.

— VCNinc
sumber
8
Ini salah, bootstrap mengalihkan secara otomatis kelas "ciutkan". Anda tidak memerlukan kode jquery tambahan. Jika Anda memiliki perilaku seperti itu, berarti ada yang salah dalam kode html Anda (untuk bagian saya saya telah memasukkan dua kali jquery dan bootstrap, lihat jawaban @raisercostin).
— RomOne
@RomOne Jawaban ini benar. Bootstrap tidak tidak menutup menu setelah link yang diklik secara default. Jawaban lain hanya berlaku jika orang salah memasukkan jQuery dua kali yang bukan merupakan jawaban yang benar untuk pertanyaan ini.
— Zim
136

Hanya untuk membagikan ini dari solusi di GitHub, ini adalah jawaban yang populer:

https://github.com/twbs/bootstrap/issues/9013#issuecomment-39698247

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

Ini dihubungkan ke dokumen, jadi Anda tidak perlu melakukannya di ready () (Anda dapat secara dinamis menambahkan tautan ke menu Anda dan itu akan tetap berfungsi), dan itu hanya dipanggil jika menu sudah diperluas. Beberapa orang telah melaporkan berkedip aneh di mana menu terbuka dan kemudian segera ditutup dengan kode lain yang tidak memverifikasi bahwa menu tersebut memiliki kelas "dalam".

[UPDATE 2014-11-04] ternyata jika menggunakan sub menu, hal di atas dapat menimbulkan masalah, sehingga hal di atas diubah menjadi:

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});
— Kevin Nelson
sumber
1
Bekerja dengan sempurna. Terima kasih telah berbagi!
— Rodrigo Chiong
Bisakah Anda menjelaskan '$ (this) .collapse (' hide ');' silahkan. saya tidak mengerti dari mana 'keruntuhan' berasal
— timebandit
@ImranNazir, maaf ini jauh setelah pertanyaan, tetapi collapsemerupakan metode yang ditentukan oleh bootstrap dan dilampirkan ke objek jQuery ... mungkin, mereka menggunakan kembali ini untuk berbagai tujuan (akordeon, navbar, dll): getbootstrap.com/javascript / # collapse-usage
— Kevin Nelson
Kode yang diperbarui berfungsi untuk saya, jawaban di atas ini tidak. Terima kasih!
— RandomUs1r
"[UPDATE 2014-11-04]" berfungsi. Adapun solusi lain yang merekomendasikan untuk menghapus referensi duplikat ke bootstrap.js dan jquery yang tidak diperlukan solusinya. Saya menemukan solusi ini untuk memperbaiki masalah dengan lebih sedikit waktu untuk debugging dan dengan perilaku yang lebih eksplisit. Terima kasih!. Saya harap ini membantu Anda karena membantu saya.
— Nour Lababidi
122

Ubah ini: 

<li><a href="#one">One</a></li>

untuk ini:

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

Perubahan sederhana ini berhasil bagi saya.

Ref: https://github.com/twbs/bootstrap/issues/9013

— FullStackDev
sumber
14
Solusi ini bagus untuk tampilan Seluler tetapi ini menunjukkan tampilkan / sembunyikan animasi di layar besar setelah tautan diklik.
— Ayman Al-Absi
22
@ AymanAl-Absi Anda harus menambahkan .inke akhir data-targetnilai: data-target=".navbar-collapse.in". Dari komentar dalam jawaban ini: stackoverflow.com/a/21797534/89818
— gak
ini bekerja dengan baik untuk saya tetapi merusak scrollspy, ada ide mengapa itu mungkin?
— Craig Harley
1
Bekerja untuk saya ketika diperbarui kode di atas dengan jawaban @caw. Saya juga menggunakan fitur scrollspy.
— Niraj
Sejauh ini, ini adalah solusi terbaik. Tanpa javascript, tanpa jQuery. Jika Anda ingin tautan tertentu menjaga menu tetap terbuka, jangan tambahkan parameter ini. Harus ditunjuk sebagai jawaban terbaik. Terima kasih.
— ed1nh0
55

Saya memiliki masalah yang sama tetapi disebabkan oleh memasukkan dua kali bootstrap.js dan jquery.jsfile.

Dengan satu klik, acara tersebut diproses dua kali oleh kedua instance jquery. Satu menutup dan satu membuka sakelar.

— kismis
sumber
3
Saya memiliki masalah yang persis sama tetapi tidak menyadari bahwa mereka dimasukkan dua kali. Terima kasih telah memposting ini!
— Brian ONeil
2
Begitu pula magang kami. Terima kasih telah memposting ini.
— Teisman
2
Pria! Saya melakukan hal yang sama - saya kira saya kembali menjadi magang!
— Pemain Dadu
2
Sangat membantu! Saya telah mengerjakan ini selama berhari-hari. Ini bisa sangat umum saat menggunakan template navbar. Berhati-hatilah! :)
— Matt Butler
2
Ini harus ditandai sebagai jawaban terbaik. Saya memiliki masalah yang sama menghapus bootstrap.js memecahkan masalah
— katwekibs
17 
$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

Ini akan membantu dalam menangani drop down di bilah navigasi

— Chakradhar Vyza
sumber
Ini memperbaiki masalah saya di mana menggunakan bootstrap dengan javascript dari slideshow jssor menciptakan masalah. Kode ini juga menciptakan efek keren saat meluaskan dan menciutkan menu seluler.
— Adam West
Terima kasih @Chakradhar, ini menghemat waktu saya.
— Omar Bahir
Terima kasih, lupa bahwa Laravel 5.5 JS menyertakan B dan Jquery di file js utama.
— Jack Vial
12

Saya mengalami / memiliki masalah serupa dengan Bootstrap 4, alpha-6, dan jawaban Joakim Johansson di atas membawa saya ke arah yang benar. Tidak perlu javascript. Menempatkan data-target = ". Navbar-collapse" dan data-toggle = "collapse" ke dalam tag div di dalam nav, tetapi mengelilingi tautan / tombol, berhasil bagi saya.

<div class="navbar-nav" data-target=".navbar-collapse" data-toggle="collapse">
   <a class="nav-item nav-link" href="#">Menu Item 1</a>
   ...
</div>
Luaskan cuplikan

— Paul
sumber
Posting Anda banyak membantu saya. Ini menyelesaikannya untuk saya <body data-toggle = "collapse" data-target = ". Navbar-collapse">
— Dessus
Ini sudah diposting 3 tahun yang lalu. Selain itu, ini merusak animasi dalam tampilan non-seluler.
— Bevor
6

Saya tahu pertanyaan ini untuk Bootstrap 3 tetapi jika Anda mencari solusi untuk Bootstrap 4 , lakukan saja ini:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});
— Syed
sumber
Saya menggunakan BS4 beta dan kode Anda berfungsi dengan sempurna. Saya mencoba semua solusi lain yang disarankan di sini tetapi tidak berhasil. BS4 tampaknya telah cukup berubah sehingga solusi lain tidak berlaku.
— Sepeda Dave
Untuk relevansi dan untuk menjaga hal-hal tetap sejalan dengan informasi yang diperbarui - Ini harus menjadi jawaban terbaik.
— Ricky
@Ricky OP menentukan Bootstrap 3, bukan 4.
— Malavos
Untuk menu dengan drop-down, saya menggunakan ini:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }
— James Wilkins
5

Saya memiliki masalah yang sama, saya menggunakan jQuery-1.7.1dan bootstrap 3.2.0. Saya mengubah versi jQuery saya ke versi terbaru ( jquery-1.11.2) dan semuanya berfungsi dengan baik.

— Densol
sumber
5

aku melakukannya 

$(".navbar-toggle").click(function(event) {
    $(".navbar-collapse").toggle('in');
});
— weaveoftheride
sumber
4

Meskipun solusi yang diposting sebelumnya untuk mengubah item menu itu sendiri, seperti di bawah, berfungsi saat menu ada di perangkat kecil, ini memiliki efek samping saat menu dalam lebar penuh dan diperluas, ini dapat mengakibatkan scrollbar horizontal bergeser di atas Anda. item menu . Solusi javascript tidak memiliki efek samping ini.

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

(maaf untuk menjawab seperti ini, ingin menambahkan komentar ke jawaban itu, tapi, sepertinya saya belum cukup kredit untuk berkomentar)

— Wim Van Houts
sumber
2 
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
— Chit
sumber
periksa versi baru Matthias S :-)
— Chit
@bfontaine Pertama, Anda harus menambahkan id di menu div Anda, dan ketika Anda mengklik menu Anda maka setelah semua menu akan disembunyikan. Contoh: - Ketika Anda mengklik menu tentang kami maka tab menu istirahat akan disembunyikan.
— Chit
1
terima kasih, tapi tolong tuliskan dalam jawaban anda;)
— bfontaine
1

Jika Anda ingin mengganti perilaku ini secara manual dengan memanggil .collapse ('hide') dalam arahan angular, berikut kodenya:

file javascript:

angular
  .module('yourAppModule')
  .directive('btnAutoCollapse', directive);

function directive() {
  var dir = {
    restrict: 'A',
    scope: {},
    link: link
  };
  return dir;

  function link(scope, element, attrs) {    
    element.on('click', function(event) {              
      $(".navbar-collapse.in").collapse('hide');
    });
  }
}

Html: 

<li class="navbar-btn">
     <a href="#" ng-hide="username" **btn-auto-collapse**>Sign in</a>
</li>
— Mirna De Jesus
sumber
1

Pastikan Anda menggunakan versi bootstrap js terbaru. Saya menghadapi masalah yang sama dan baru saja memutakhirkan file bootstrap.js dari bootstrap-3.3.6 sudah melakukan keajaiban.

— Aman Arun
sumber
1

Jika Anda hanya ingin navigasi Anda beralih saat digunakan di layar seluler, menambahkan data-toggle="collapse"dan data-target="#navbar"ke elemen a saja akan berfungsi di layar seluler, tetapi akan memberi Anda kedipan aneh saat diklik di layar desktop. Solusi jQuery tidak berfungsi dengan baik jika Anda berada di lingkungan Aurelia atau Angular.

Solusi terbaik bagi saya adalah membuat atribut khusus yang mendengarkan kueri media yang sesuai dan menambahkan data-toggle="collapse"atribut jika diinginkan:

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

Atribut khusus Aurelia terlihat seperti ini:

import {autoinject} from 'aurelia-framework';

@autoinject
export class CollapseToggleIfLess768CustomAttribute {
  element: Element;

  constructor(element: Element) {
    this.element = element;
    var mql = window.matchMedia("(min-width: 768px)");
    mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList));
    this.handleMediaChange(mql);
  }

  handleMediaChange(mediaQueryList: MediaQueryList) {
    if (mediaQueryList.matches) {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (dataToggle) {
        this.element.attributes.removeNamedItem("data-toggle");
      }
    } else {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (!dataToggle) {
        var dataToggle = document.createAttribute("data-toggle");
        dataToggle.value = "collapse";
        this.element.attributes.setNamedItem(dataToggle);
      }
    }
  }
}
Luaskan cuplikan

— halllo
sumber
0

Saya menemukan bahwa setelah banyak perjuangan, coba-coba, solusi terbaik untuk saya di jsfiddle. Tautan ke inspirasi di jsfiddle.net . Saya menggunakan bootstrap navbar navbar-fixed-top dengan tombol collapse dan hamburger. Ini adalah versi saya di jsfiddle: jsfiddle Scrollspy navbar . Saya hanya mendapatkan fungsionalitas dasar menggunakan petunjuk di getbootsrap.com. Bagi saya, masalahnya sebagian besar pada arah yang tidak jelas dan direkomendasikan oleh situs getbootstrap. Bagian terbaiknya adalah menambahkan sedikit tambahan js ini (yang memang mencakup beberapa dari apa yang disebutkan di utas di atas) memecahkan beberapa masalah Scrollspy untuk saya termasuk:

  1. Menu navigasi yang diciutkan / diubah menyembunyikan saat "bagian" navigasi (mis. Href = "# foobar") diklik (masalah menangani utas ini).
  2. "Bagian" aktif berhasil disorot (mis. Js berhasil dibuat class = "aktif")
  3. Bilah gulir vertikal yang mengganggu yang ditemukan di navigasi yang runtuh (hanya di layar kecil) dihilangkan.

CATATAN: Dalam kode js yang ditunjukkan di bawah ini (dari tautan jsfiddle kedua di posting saya):

topMenu = $ ("# myScrollspy"),

... nilai "myScrollspy" harus cocok dengan id = "" di HTML Anda seperti ...

<nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">

Tentu saja Anda dapat mengubah nilai itu menjadi nilai apa pun yang Anda suka.

— Adam Calihman
sumber
0

Yang Anda butuhkan hanyalah data-target = ". Navbar-collapse" di tombol, tidak ada yang lain.

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
— Marodo
sumber
+1: Ini juga bekerja dengan menambahkan data-toggle = "collapse" data-target = ". Navbar-collapse" ke <a /> atau dalam kasus saya <Link /> di Meteorjs dengan React, Terima kasih.
— Joe L.
ya itu berfungsi dengan <a/>tetapi tidak berhasil <NavLink/>, runtuh tetapi, <NavLink/>tidak berfungsi lagi, ada ide mengapa?
— Piramida
0

Ini adalah kode yang berhasil untuk saya:

jQuery('document').ready(function()
{   
   $(".navbar-header button").click(function(event) {
   if ($(".navbar-collapse").hasClass('in'))
   {  $(".navbar-collapse").slideUp();  }
});})
— Roddy P. Carbonell
sumber
0

Saya memiliki masalah yang sama, pastikan bootstrap.js disertakan dalam halaman html Anda. Dalam kasus saya, menu terbuka tetapi tidak menutup. Segera setelah saya menyertakan file bootstrap js, semuanya langsung bekerja.

— Elitmiar
sumber
0

Sederhana Cobalah untuk membuat fungsi dalam javascript untuk kelas runtuh dropdown.

Contoh:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

    $timeout(function(){
        $scope.preLoader = false;
        $(document).ready(function() {
            $("#dropdown-element").toggleClass('show');
        });
    },100);

};

Hubungkan fungsi ini dengan onClickkarya sederhana untuk saya.

— yasir_mughal
sumber
0

Saya memiliki masalah serupa tetapi masalah saya tidak akan tetap terbuka itu akan membuka / menutup dengan cepat, saya menemukan bahwa saya memuat jquery-1.11.1.min.js sebelum bootstrap.min.js. Jadi saya membalik urutan 2 file itu dan memperbaiki menu saya. Berjalan dengan sempurna sekarang. Semoga membantu

— Vasko
sumber
0

Masalahnya mungkin Anda menggunakan versi lama dari bootstrap atau jquery, ATAU Anda memanggil lebih dari satu versi dalam markup Anda.

Simpan saja versi terbaru, Anda hanya perlu satu referensi. Memecahkan masalah.

— Nick
sumber
0

Anda mungkin ingin memastikan bahwa Anda memuat ATF jQuery dan Bootstrap.min.js Anda. Navigasi Anda adalah hal pertama yang dirender pada halaman, jadi jika Anda memiliki skrip di bagian bawah HTML, Anda kehilangan fungsionalitas JavaScript.

— Chris Johnson
sumber
0

Saya memiliki masalah yang sama hanya di seluler tetapi untuk aplikasi Angular dan inilah yang saya lakukan:

app.component.html

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="col-md-12">
      <div class="navbar-header page-scroll">
      <button id ="navButton" style="color:red"type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" routerLink="/"><img id="navbrand" class="site-logo"  src="assets/img/yayaka_logo.png"/></a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <li class="dropdown" appDropdown>
          <a class="dropdown-toggle" style="cursor: pointer;">
            ΤΙ ΕΙΝΑΙ ΤΟ yayaka<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a (click) = "closeMenu()" href="/#about">About</a></li>
            <li><a (click) = "closeMenu()" href="/#services">Services</a></li>
          </ul>
        </li>
        <li class="page-scroll">
          <a (click) = "closeMenu()" routerLink="/profiles"><strong>Profiles</strong></a>
        </li>
      </ul>
    </div>
  </div>
  </div>
</nav>

app.component.ts 

 closeMenu() {
    var isMobile = /iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile|Android/i.test(navigator.userAgent);
    if (isMobile) {
      document.getElementById('navButton').click();
    }
  }

Semoga membantu :)

— stathoula
sumber
-2

Menu saya bukan standar navbar, tetapi saya berhasil menutup menu saya secara otomatis, menggunakan fungsi "onclick" dan ".click ()".

<div class="main-header">
    <div class="container">
        <div id="menu-wrapper">
            <div class="row">

                <div class="logo-wrapper col-lg-4 col-md-6 col-sm-7 hidden-xs">

                </div> <!-- /.logo-wrapper -->

                <div class="logo-wrapper2 visible-xs col-xs-9">

                </div> <!-- /.smaller logo-wrapper -->

                <div class="col-lg-8 col-md-6 col-sm-5 col-xs-3 main-menu text-center">
                    <ul class="menu-first hidden-md hidden-sm hidden-xs">
                        <li class="active"><a href="#">item1</a></li> |
                        <li><a href="#our-team">item2</a></li> |
                        <li><a href="#services">item3</a></li> |
                        <li><a href="#elia">item4</a></li> |
                        <li><a href="#portfolio">item5</a></li> |
                        <li><a href="#contact">item6</a></li>
                    </ul>
                    <a href="#" class="toggle-menu visible-md visible-sm visible-xs"><i class="fa fa-bars"></i></a>
                </div> <!-- /.main-menu -->
            </div> <!-- /.row -->
        </div> <!-- /#menu-wrapper -->
        <div class="menu-responsive hidden-lg">
            <ul>
                <li class="active" onclick = $(".toggle-menu").click();><a href="#">item1</a></li>
                <li><a href="#our-team" onclick = $(".toggle-menu").click();>item2</a></li>
                <li><a href="#services" onclick = $(".toggle-menu").click();>item3</a></li>
                <li><a href="#elia" onclick = $(".toggle-menu").click();>item4</a></li>
                <li><a href="#portfolio" onclick = $(".toggle-menu").click();>item5</a></li>
                <li><a href="#contact" onclick = $(".toggle-menu").click();>item6</a></li>
            </ul>
        </div> <!-- /.menu-responsive -->
    </div> <!-- /.container -->
</div> <!-- /.main-header
— Bravo Stefane
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.