Bootstrap 3 daraltılmış menü tıklandığında kapanmıyor

122

Bootstrap 3'ten aşağı yukarı standart bir navigasyona sahibim

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

Normalde daha küçük cihazlarda çöker. Menü düğmesine tıklamak menüyü genişletiyor ancak bir menü bağlantısına tıklarsam (veya bu konuda dokunursam) menü açık kalıyor. Tekrar kapatmak için ne yapmalıyım?

— Paranoya
kaynak

5

user3669917'nin cevabı kesinlikle en kolay ve en basit cevaptır!

— Thomas

1

Click Twitter Bootstrap nav daraltmasının

— Inanc Gumus

48

Bootstrap'in varsayılan ayarı, bir menü öğesine tıkladığınızda menüyü açık tutmaktır. .collapse('hide');Daraltmak istediğiniz jQuery öğesini çağırarak bu davranışı el ile geçersiz kılabilirsiniz .

— VCNinc
kaynak

8

Bu yanlış, bootstrap otomatik olarak "daraltma" sınıfını değiştirir. Herhangi bir ek jquery koduna ihtiyacınız yoktur. Böyle bir davranışınız varsa, bu html kodunuzda bir sorun olduğu anlamına gelir (benim açımdan iki kez jquery ve bootstrap ekledim, @raisercostin cevabına bakın).

— RomOne

@RomOne Bu yanıt doğru. Bootstrap yok değil bağlantılar tıklandığında sonra menüyü kapatmak varsayılan olarak. Diğer cevap yalnızca , insanlar jQuery'yi iki kez yanlış eklediklerinde geçerlidir ki bu bu soruya doğru cevap değildir.

— Zim

136

Bunu GitHub'daki çözümlerden paylaşmak için, popüler cevap şuydu:

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

Bu belgeye bağlanmıştır, bu nedenle ready () üzerinde yapmanız gerekmez (dinamik olarak menünüze bağlantılar ekleyebilirsiniz ve çalışmaya devam eder) ve yalnızca menü zaten genişletilmişse çağrılır. Bazı kişiler, menünün açıldığı ve ardından menünün "in" sınıfına sahip olduğunu doğrulamayan başka bir kodla hemen kapandığı yerde garip bir şekilde yanıp söndüğünü bildirdi.

[GÜNCELLEME 2014-11-04] görünüşe göre alt menüleri kullanırken yukarıdakiler sorunlara neden olabilir, bu nedenle yukarıdakiler şu şekilde değiştirildi:

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

— Kevin Nelson
kaynak

1

Kusursuz çalışır. Paylaşım için teşekkürler!

— Rodrigo Chiong

'$ (This) .collapse (' hide ');' Lütfen. '

— çöküş'ün

@ImranNazir, özür dilerim bu sorudan çok sonra, ancak collapsebootstrap tarafından tanımlanan ve jQuery nesnesine eklenen bir yöntem ... muhtemelen bunu birden çok amaç için yeniden kullanıyorlar (akordeon, navbar, vb.): Getbootstrap.com/javascript / # collapse-usage

— Kevin Nelson

Güncellenen kod benim için çalıştı, bunun üzerindeki cevaplar işe yaramadı. Teşekkürler!

— RandomUs1r

"[UPDATE 2014-11-04]" işe yaradı. Çözüm için gerekli olmayan bootstrap.js ve jquery'ye yinelenen referansı kaldırmayı önerdiği diğer çözüme gelince. Bu çözümü, hata ayıklamada daha az zaman harcayarak ve daha açık davranışla sorunu çözmek için buldum. Teşekkür ederim!. Umarım bu bana yardımcı olduğu için size yardımcı olur.

— Nour Lababidi

122

Bunu değiştir:

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

buna:

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

Bu basit değişiklik benim için çalıştı.

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

— FullStackDev
kaynak

14

Bu çözüm Mobil görünüm için uygundur, ancak bağlantı tıklandığında büyük ekranlarda animasyonu göster / gizle gösterir.

— Ayman Al-Absi

22

AymanAl-absi @ Sen eklemek zorunda .insonuna data-targetdeğeri: data-target=".navbar-collapse.in". Bu

— yanıttaki yorumdan

bu benim için harika çalışıyor ama parşömeni bozuyor, bunun neden olabileceği hakkında bir fikriniz var mı?

— Craig Harley

1

Yukarıdaki kod @caw cevabı ile güncellendiğinde benim için çalıştı. Ayrıca scrollspy özelliğini kullanıyorum.

— Niraj

Bu açık ara en iyi çözümdür. Javascript yok, jQuery yok. Belirli bir bağlantının menüyü açık tutmasını istiyorsanız, bu parametreleri eklemeyin. En iyi cevap olarak gösterilmelidir. Teşekkür ederim.

— ed1nh0

55

Aynı sorunu yaşadım ama iki kez bootstrap.js ve jquery.jsdosyalar eklemekten kaynaklanıyordu .

Tek bir tıklamayla olay, her iki jquery örneği tarafından iki kez işlendi. Biri kapandı ve biri geçişi açtı.

— raisercostin
kaynak

3

Aynı sorunu yaşadım ama iki kez dahil edildiklerinin farkında değildim. Bunu gönderdiğiniz için teşekkürler!

— Brian ONeil

2

Bizim stajyerimiz de öyle. Bunu gönderdiğiniz için teşekkürler.

— Teisman

2

Adam! Ben de aynı şeyi yaptım - sanırım stajyer olmaya geri döndüm!

— Dicer

2

Çok yardımsever! Bunun üzerinde günlerdir çalışıyordum. Gezinti çubuğu şablonu kullanılırken bu çok yaygın olabilir. Dikkatli olun millet! :)

— Matt Butler

2

Bu, en iyi cevap olarak işaretlenmelidir. Bootstrap.js'yi kaldırırken de aynı sorunu

— yaşadım

17

$(".navbar-nav li a").click(function(event) {
    if (!$(this).parent().hasClass('dropdown'))
        $(".navbar-collapse").collapse('hide');
});

Bu, gezinme çubuğundaki düşüşün işlenmesine yardımcı olur

— Chakradhar Vyza
kaynak

Bu, bir jssor slayt gösterisinden javascript ile önyükleme kullanmanın sorunları oluşturduğu sorunumu çözdü. Bu kod, mobil menüyü genişletirken ve daraltırken de harika bir etki yaratır.

— Adam West

Teşekkürler @Chakradhar, zamanımı kurtardı.

— Omar Bahir

Teşekkürler, Laravel 5.5 JS'nin ana js dosyasında B ve Jquery içerdiğini unuttum.

— Jack Vial

12

Bootstrap 4, alpha-6 ile benzer sorunlar yaşıyorum / yaşıyorum ve Joakim Johansson'un yukarıdaki cevabı beni doğru yönde başlattı. Javascript gerekmez. Nav içindeki div etiketine data-target = ". Navbar-collapse" ve data-toggle = "collapse" koymak, ancak bağlantıları / düğmeleri çevrelemek benim için çalıştı.

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

Snippet'i genişlet

— Paul
kaynak

Gönderiniz bana çok yardımcı oldu. Bu benim için sorunu çözdü <body data-toggle = "collapse" data-target = ". Navbar-collapse">

— Dessus

Bu zaten 3 yıl önce yayınlandı. Ek olarak, mobil olmayan görünümdeki animasyonu bozar.

— Bevor

6

Bu sorunun Bootstrap 3 için olduğunu biliyorum, ancak Bootstrap 4 için çözüm arıyorsanız , şunu yapın:

$(document).on('click','.navbar-collapse.show',function(e) {
  $(this).collapse('hide');
});

— syed
kaynak

BS4 beta kullanıyorum ve kodunuz mükemmel çalışıyor. Burada önerilen tüm diğer çözümleri şanssız olarak denedim. Görünüşe göre BS4, diğer çözümlerin uygulanamayacağı kadar değişti.

— Bisiklet Dave

Alaka düzeyi ve güncel bilgilerle eşzamanlı tutmak için - Bu en iyi cevap olmalıdır.

— Ricky

@Ricky OP, 4 değil, Bootstrap 3'ü belirtti.

— Malavos

Açılır menüler için şunu kullandım:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }

— James Wilkins

5

Ben de aynı sorunu yaşadım, jQuery-1.7.1ve kullanıyordum bootstrap 3.2.0. JQuery sürümümü en son ( jquery-1.11.2) sürüme değiştirdim ve her şey yolunda gidiyor.

— Densol
kaynak

5

yaptım

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

— weaveoftheride
kaynak

4

Menü öğesinin kendisini değiştirmek için daha önce yayınlanan çözüm, aşağıda olduğu gibi, menü küçük bir cihazdayken çalışsa da, menü tam genişlikte ve genişletilmiş olduğunda bir yan etkiye sahiptir , bu, sizin üzerinde yatay bir kaydırma çubuğunun kaymasına neden olabilir. menü öğeleri . JavaScript çözümlerinin bu yan etkisi yoktur.

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

(böyle cevap verdiğim için özür dilerim, bu cevaba bir yorum eklemek istedim, ancak yorum yapmak için yeterli kredim yok gibi görünüyor)

— Wim Van Houts
kaynak

2

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

— para makbuzu
kaynak

yeni versiyonunu kontrol et Matthias S :-)

— Chit

@bfontaine Öncelikle menünüze div'e id eklemeniz gerekiyor ve menünüze tıkladığınızda tüm menünüz gizlenecektir. Örneğin: - Hakkımızda menüsüne tıkladığınızda dinlenme menüsü sekmesi gizlenecektir.

— Chit

1

teşekkür ederim, ama bu yazma lütfen içinde Cevabınız;)

— bfontaine

1

Bir angular yönergesi içinde .collapse ('gizle') çağırarak bu davranışı manuel olarak geçersiz kılmak istemeniz durumunda, kod şu şekildedir:

javascript dosyası:

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
kaynak

1

Lütfen en son bootstrap js sürümünü kullandığınızdan emin olun. Ben de aynı sorunla karşılaşıyordum ve bootstrap-3.3.6'dan bootstrap.js dosyasını yükseltmek sihri yaptı.

— Aman Arun
kaynak

1

Gezinme işleminizin yalnızca bir mobil ekranda kullanıldığında geçiş yapmasını istiyorsanız, yalnızca data-toggle="collapse"ve data-target="#navbar"öğelerinize eklemek mobil ekranda çalışacak, ancak bir masaüstü ekranına tıklandığında size garip bir titreme verecektir. Bir Aurelia veya Angular ortamındaysanız jQuery çözümleri iyi çalışmaz.

Benim için en iyi çözüm, ilgili medya sorgusunu dinleyen ve data-toggle="collapse"istenirse özniteliği ekleyen özel bir öznitelik oluşturmaktı :

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

Aurelia ile özel nitelik şuna benzer:

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

Snippet'i genişlet

— halllo
kaynak

0

Çok fazla mücadele, deneme ve yanılma sonrasında benim için en iyi çözümü jsfiddle'da buldum. Jsfiddle.net'teki ilham kaynağına bağlantı . Bootstrap'in navbar navbar-fixed-top'unu daraltma ve hamburger geçişi ile kullanıyorum. İşte jsfiddle'daki sürümüm: jsfiddle Scrollspy navbar . Getbootsrap.com'daki talimatları kullanarak yalnızca temel işlevleri alıyordum. Benim için sorun çoğunlukla belirsiz yönlerdeydi ve getbootstrap sitesi tarafından önerilen js idi. En iyi yanı, bu ekstra js parçasının eklenmesinin (yukarıdaki başlıklarda bahsedilenlerden bazılarını içerir) benim için birkaç Scrollspy sorununu çözmesiydi:

Nav "bölümü" (örneğin href = "# foobar") tıklandığında daraltılmış / değiştirilmiş gezinme menüsü gizleniyor (bu konuya yönelik sorun).
Etkin "bölüm" başarıyla vurgulandı (ör. Js başarıyla oluşturuldu class = "active")
Daraltılmış navigasyonda (sadece küçük ekranlarda) bulunan rahatsız edici dikey kaydırma çubuğu ortadan kaldırıldı.

NOT: Aşağıda gösterilen js kodunda (yazımdaki ikinci jsfiddle bağlantısından):

topMenu = $ ("# myScrollspy"),

... "myScrollspy" değeri, HTML'nizdeki id = "" ile eşleşmelidir, şöyle ...

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

Elbette bu değeri istediğiniz değere değiştirebilirsiniz.

— Adam Calihman
kaynak

0

İhtiyacınız olan tek şey düğmedeki data-target = ". Navbar-collapse", başka bir şey değil.

<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
kaynak

+1: Ayrıca, <a /> öğesine data-toggle = "collapse" data-target = ". Navbar-collapse" veya React ile Meteorjs'te <Link /> ekleyerek de çalışır, Teşekkürler.

— Joe L.

evet birlikte çalışıyor <a/>ama birlikte çalışmıyor <NavLink/>, çöküyor ama <NavLink/>artık çalışmıyor, herhangi bir fikriniz neden?

— Piramit

0

Bu benim için çalışan kod:

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

— Roddy P. Carbonell
kaynak

0

Ben de aynı sorunu yaşadım, bootstrap.js'nin html sayfanıza dahil edildiğinden emin olun. Benim durumumda menü açıldı ama kapanmadı. Bootstrap js dosyasını dahil eder etmez her şey çalıştı.

— Elitmiar
kaynak

0

Basit Açılır daraltma sınıfı için javascript'te bir işlev yapmayı deneyin.

Misal:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

Bu işlevi onClickbenim için basit işlere bağlayın.

— yasir_mughal
kaynak

0

Ben de benzer bir sorun yaşadım ama benimki açık kalmazdı, hızlı bir şekilde açılıp kapanırdı, bootstrap.min.js'den önce jquery-1.11.1.min.js yüklemesi olduğunu öğrendim. Ben de bu 2 dosyanın sırasını değiştirdim ve menümü düzelttim. Artık kusursuz çalışıyor. Umarım yardımcı olur

— Vasko
kaynak

0

Sorun, bootstrap veya jquery'nin güncel olmayan sürümlerini kullanıyor olmanız VEYA biçimlendirmenizde birden fazla sürümü aramanız olabilir.

Sadece en son sürümleri saklayın, sadece bir referansa ihtiyacınız var. Sorunu çözer.

— Nick
kaynak

0

jQuery ve Bootstrap.min.js ATF'nizi yüklediğinizden emin olmak isteyebilirsiniz. Gezinmeniz, sayfada oluşturulan ilk şeydir, bu nedenle, komut dosyalarınız HTML'nizin alt kısmındaysa, JavaScript işlevlerini kaybedersiniz.

— Chris Johnson
kaynak

0

Aynı sorunu yalnızca mobil cihazlarda yaşadım, ancak bir Angular uygulaması için yaptım ve bunu yaptım:

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

Umarım yardımcı olur :)

— stathoula
kaynak

-2

Menüm standart bir navbar değil, ancak bir "onclick" işlevi ve bir ".click ()" kullanarak benimkini otomatik olarak daraltmayı başardım.

<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
kaynak