Das reduzierte Menü von Bootstrap 3 wird beim Klicken nicht geschlossen

122

Ich habe eine mehr oder weniger Standardnavigation von 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>

Bei kleineren Geräten fällt es normalerweise zusammen. Durch Klicken auf die Menüschaltfläche wird das Menü erweitert. Wenn ich jedoch auf einen Menülink klicke (oder ihn berühre), bleibt das Menü geöffnet. Was muss ich tun, um es wieder zu schließen?

html css twitter-bootstrap navigation Paranoia
quelle

5

Die Antwort von user3669917 ist sicherlich die einfachste und direkteste Antwort!

Thomas

1

Mögliches Duplikat von Hide Twitter Bootstrap Nav Zusammenbruch beim Klicken

Inanc Gumus

48

Die Standardeinstellung von Bootstrap besteht darin, das Menü geöffnet zu halten, wenn Sie auf einen Menüpunkt klicken. Sie können dieses Verhalten manuell überschreiben, indem Sie .collapse('hide');das jQuery-Element aufrufen, das Sie reduzieren möchten.

VCNinc
quelle

8

Dies ist falsch, Bootstrap schaltet automatisch die "Collapse" -Klasse um. Sie benötigen keinen zusätzlichen Abfragecode. Wenn Sie ein solches Verhalten haben, bedeutet dies, dass etwas in Ihrem HTML-Code nicht stimmt (meinerseits habe ich zweimal jquery und bootstrap eingefügt, siehe die Antwort von @raisercostin).

RomOne

@ RomOne Diese Antwort ist richtig. Bootstrap ist nicht schließen Sie das Menü nach Links angeklickt werden standardmäßig aktiviert . Die andere Antwort gilt nur, wenn jQuery zweimal falsch angegeben wird, was nicht die richtige Antwort auf diese Frage ist.

Zim

136

Nur um dies von Lösungen auf GitHub zu teilen, war dies die beliebte Antwort:

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

Dies ist mit dem Dokument verbunden, sodass Sie es nicht auf ready () ausführen müssen (Sie können Links dynamisch an Ihr Menü anhängen, und es funktioniert weiterhin), und es wird nur aufgerufen, wenn das Menü bereits erweitert ist. Einige Leute haben ein seltsames Blinken gemeldet, bei dem das Menü geöffnet und dann sofort mit einem anderen Code geschlossen wird, der nicht überprüft hat, ob das Menü die Klasse "in" enthält.

[UPDATE 2014-11-04] Anscheinend kann das oben Genannte bei Verwendung von Untermenüs Probleme verursachen, daher wurde das oben Gesagte geändert in:

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

Kevin Nelson
quelle

1

Funktioniert einwandfrei. Danke für das Teilen!

Rodrigo Chiong

Können Sie '$ (this) .collapse (' hide ');' Bitte. Ich verstehe nicht, woher "Zusammenbruch" kommt

Timebandit

@ImranNazir, sorry, das ist weit nach der Frage, aber es collapseist eine Methode, die durch Bootstrap definiert und an das jQuery-Objekt angehängt wird ... vermutlich verwenden sie dies für mehrere Zwecke (Akkordeon, Navigationsleiste usw.): getbootstrap.com/javascript / # Zusammenbruch-Nutzung

Kevin Nelson

Der aktualisierte Code hat bei mir funktioniert, die Antworten darüber nicht. Vielen Dank!

RandomUs1r

Das "[UPDATE 2014-11-04]" hat funktioniert. Wie bei der anderen Lösung, bei der empfohlen wird, doppelte Verweise auf bootstrap.js und jquery zu entfernen, ist die Lösung nicht erforderlich. Ich fand diese Lösung, um das Problem mit weniger Zeit bis zur Taille beim Debuggen und mit expliziterem Verhalten zu beheben. Danke dir!. Ich hoffe das hilft dir wie es mir geholfen hat.

Nour Lababidi

122

Ändere das:

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

dazu:

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

Diese einfache Änderung hat bei mir funktioniert.

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

FullStackDev
quelle

14

Diese Lösung eignet sich gut für die mobile Ansicht, zeigt jedoch die Animation zum Ein- und Ausblenden auf großen Bildschirmen an, sobald auf den Link geklickt wird.

Ayman Al-Absi

22

@ AymanAl-Absi Sie müssen .inam Ende des data-targetWertes hinzufügen : data-target=".navbar-collapse.in". Aus dem Kommentar in dieser Antwort: stackoverflow.com/a/21797534/89818

caw

Das funktioniert gut für mich, aber es bricht den Scrollspy. Irgendeine Idee, warum das so sein könnte?

Craig Harley

1

Hat für mich funktioniert, als der obige Code mit der Antwort @caw aktualisiert wurde. Ich benutze auch die Scrollspy-Funktion.

Niraj

Dies ist bei weitem die beste Lösung. Kein Javascript, keine jQuery. Wenn Sie möchten, dass ein bestimmter Link das Menü geöffnet hält, fügen Sie diese Parameter einfach nicht hinzu. Sollte als die beste Antwort angegeben werden. Danke dir.

ed1nh0

55

Ich hatte das gleiche Problem, wurde aber durch das Einfügen von zweimal bootstrap.js und jquery.jsDateien verursacht.

Mit einem einzigen Klick wurde das Ereignis von beiden jquery-Instanzen zweimal verarbeitet. Einer schloss und einer öffnete den Schalter.

Rosercostin
quelle

3

Ich hatte genau das gleiche Problem, wusste aber nicht, dass sie zweimal aufgenommen wurden. Danke, dass du das gepostet hast!

Brian ONeil

2

Unser Praktikant auch. Vielen Dank für die Veröffentlichung.

Teisman

2

Mann! Ich habe das Gleiche getan - ich bin wohl wieder Praktikant!

Dicer

2

So hilfreich! Ich hatte tagelang daran gearbeitet. Dies kann sehr häufig vorkommen, wenn Sie eine Navigationsleistenvorlage verwenden. Seid vorsichtig, Leute! :)

Matt Butler

2

Dies sollte als die beste Antwort markiert werden. Ich hatte das gleiche Problem beim Entfernen von bootstrap.js löste das Problem

katwekibs

17

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

Dies würde bei der Handhabung Dropdown in der Navigationsleiste helfen

Chakradhar Vyza
quelle

Dies hat mein Problem behoben, bei dem die Verwendung von Bootstrap mit dem Javascript aus einer Jssor-Diashow Probleme verursachte. Dieser Code erzeugt auch einen coolen Effekt beim Erweitern und Reduzieren des mobilen Menüs.

Adam West

Danke @Chakradhar, es hat mir Zeit gespart.

Omar Bahir

Vielen Dank, ich habe vergessen, dass Laravel 5.5 JS B und Jquery in der Haupt-JS-Datei enthält.

Jack Vial

12

Ich habe / hatte ähnliche Probleme mit Bootstrap 4, Alpha-6 und Joakim Johanssons obige Antwort hat mich in die richtige Richtung geführt. Kein Javascript erforderlich. Das Einfügen von data-target = ". Navbar-Collapse" und data-toggle = "Collapse" in das div-Tag innerhalb des Navis, aber um die Links / Schaltflächen herum, hat bei mir funktioniert.

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

Erweitern Sie das Snippet

Paul
quelle

Ihr Beitrag hat mir sehr geholfen. Dies löste es für mich <body data-toggle = "Zusammenbruch" data-target = ". Navbar-Zusammenbruch">

Dessus

Dies wurde bereits vor 3 Jahren gepostet. Außerdem wird die Animation in der nicht mobilen Ansicht unterbrochen.

Bevor

6

Ich weiß, dass diese Frage für Bootstrap 3 gilt, aber wenn Sie nach einer Lösung für Bootstrap 4 suchen , tun Sie dies einfach:

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

Syed
quelle

Ich benutze BS4 Beta und Ihr Code funktioniert perfekt. Ich habe alle anderen Lösungsvorschläge hier ohne Glück ausprobiert. BS4 hat sich anscheinend so verändert, dass andere Lösungen einfach nicht zutreffen.

Fahrrad Dave

Aus Gründen der Relevanz und um mit den aktualisierten Informationen Schritt zu halten - Dies sollte die beste Antwort sein.

Ricky

@ Ricky OP spezifizierte Bootstrap 3, nicht 4.

Malavos

Für Menüs mit Dropdowns habe ich Folgendes verwendet:$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }

James Wilkins

5

Ich hatte das gleiche Problem, das ich benutzte jQuery-1.7.1und bootstrap 3.2.0. Ich habe meine jQuery-Version auf die neueste ( jquery-1.11.2) Version geändert und alles funktioniert gut.

Densol
quelle

5

Ich tat

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

Weaveoftheride
quelle

4

Obwohl die zuvor veröffentlichte Lösung zum Ändern des Menüelements selbst (siehe unten) funktioniert, wenn sich das Menü auf einem kleinen Gerät befindet, hat sie einen Nebeneffekt, wenn das Menü in voller Breite und erweitert ist. Dies kann dazu führen, dass eine horizontale Bildlaufleiste über Ihr Menü verschoben wird Menüpunkte . Die Javascript-Lösungen haben diesen Nebeneffekt nicht.

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

(Entschuldigung für die Antwort auf diese Weise, wollte dieser Antwort einen Kommentar hinzufügen, aber anscheinend habe ich nicht genügend Kredit, um Bemerkungen zu machen)

Wim Van Houts
quelle

2

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

Chit
quelle

check it new version Matthias S :-)

Chit

@bfontaine Zuerst müssen Sie eine ID in Ihr Menü div einfügen. Wenn Sie auf Ihr Menü klicken, wird das gesamte Menü ausgeblendet. Zum Beispiel: - Wenn Sie auf das Menü "Über uns" klicken, wird die Registerkarte "Restmenü" ausgeblendet.

Chit

1

danke, aber bitte schreibe das in deine Antwort;)

bfontaine

1

Wenn Sie dieses Verhalten manuell überschreiben möchten, indem Sie .collapse ('hide') innerhalb der Direktive eines Winkels aufrufen, finden Sie hier den folgenden Code:

Javascript-Datei:

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
quelle

1

Bitte stellen Sie sicher, dass Sie die neueste Bootstrap JS-Version verwenden. Ich hatte das gleiche Problem und nur das Aktualisieren der Datei bootstrap.js von bootstrap-3.3.6 hat die Magie ausgelöst.

Aman Arun
quelle

1

Wenn Sie möchten, dass Ihre Navigation nur umschaltet, wenn Sie sie auf einem mobilen Bildschirm verwenden, funktioniert das Hinzufügen data-toggle="collapse"und Hinzufügen data-target="#navbar"von Elementen auf dem mobilen Bildschirm, gibt Ihnen jedoch ein seltsames Flimmern, wenn Sie auf einen Desktop-Bildschirm klicken. Die jQuery-Lösungen funktionieren nicht gut, wenn Sie sich in einer Aurelia- oder Angular-Umgebung befinden.

Die beste Lösung für mich war, ein benutzerdefiniertes Attribut zu erstellen, das die entsprechende Medienabfrage abhört und das data-toggle="collapse"Attribut bei Bedarf hinzufügt :

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

Das benutzerdefinierte Attribut mit Aurelia sieht folgendermaßen aus:

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

Erweitern Sie das Snippet

Halllo
quelle

0

Ich fand, dass nach viel Kampf, Versuch und Irrtum die beste Lösung für mich auf jsfiddle. Link zur Inspiration auf jsfiddle.net . Ich benutze Bootstraps Navbar Navbar-Fixed-Top mit Collapse und Hamburger Toggle. Hier ist meine Version auf jsfiddle: jsfiddle Scrollspy navbar . Ich habe nur grundlegende Funktionen erhalten, indem ich die Anweisungen auf getbootsrap.com verwendet habe. Für mich lag das Problem hauptsächlich in den vagen Richtungen und js, die von der getbootstrap-Site empfohlen wurden. Das Beste daran war, dass das Hinzufügen dieses zusätzlichen Js (das einige der in den obigen Threads erwähnten Elemente enthält) mehrere Scrollspy-Probleme für mich löste, darunter:

Das reduzierte / umgeschaltete Navigationsmenü wird ausgeblendet, wenn auf den Navigationsbereich (z. B. href = "# foobar") geklickt wird (Problem bei der Adressierung dieses Threads).
Aktiver "Abschnitt" wurde erfolgreich hervorgehoben (dh js erfolgreich erstellte class = "active")
Die störende vertikale Bildlaufleiste, die bei einem zusammengeklappten Navigationsgerät (nur auf kleinen Bildschirmen) gefunden wurde, wurde entfernt.

HINWEIS: Im unten gezeigten js-Code (über den zweiten jsfiddle-Link in meinem Beitrag):

topMenu = $ ("# myScrollspy"),

... der Wert "myScrollspy" muss mit der id = "" in Ihrem HTML wie folgt übereinstimmen ...

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

Natürlich können Sie diesen Wert in einen beliebigen Wert ändern.

Adam Calihman
quelle

0

Alles was Sie brauchen ist data-target = ". Navbar -apse" in der Schaltfläche, sonst nichts.

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

+1: Es funktioniert auch durch Hinzufügen von data-toggle = "Collapse" data-target = ". Navbar-Collapse" zu <a /> oder in meinem Fall <Link /> in Meteorjs mit React, danke.

Joe L.

Ja, es funktioniert mit, <a/>aber es hat nicht funktioniert <NavLink/>, es bricht zusammen, <NavLink/>aber funktioniert es nicht mehr, irgendwelche Ideen warum?

Die Pyramide

0

Dies ist der Code, der für mich funktioniert hat:

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

Roddy P. Carbonell
quelle

0

Ich hatte das gleiche Problem, stellen Sie sicher, dass bootstrap.js in Ihrer HTML-Seite enthalten ist. In meinem Fall wurde das Menü geöffnet, aber nicht geschlossen. Sobald ich die Bootstrap-JS-Datei eingefügt hatte, funktionierte einfach alles.

Elitmiar
quelle

0

Einfach Versuchen Sie, eine Funktion in Javascript für die Dropdown-Kollapsklasse zu erstellen.

Beispiel:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

Hängen Sie diese Funktion an onClickeinfache Arbeiten für mich.

yasir_mughal
quelle

0

Ich hatte das ähnliche Problem, aber meins würde nicht offen bleiben, es würde sich schnell öffnen / schließen. Ich stellte fest, dass jquery-1.11.1.min.js vor bootstrap.min.js geladen wurde. Also habe ich die Reihenfolge dieser 2 Dateien umgekehrt und mein Menü korrigiert. Läuft jetzt einwandfrei. Ich hoffe es hilft

Vasko
quelle

0

Das Problem könnte sein, dass Sie veraltete Versionen von Bootstrap oder JQuery verwenden oder mehr als eine Version in Ihrem Markup aufrufen.

Behalten Sie einfach die neuesten Versionen, Sie benötigen nur die eine Referenz. Löst das Problem.

Nick
quelle

0

Möglicherweise möchten Sie nur sicherstellen, dass Sie Ihre ATF für jQuery und Bootstrap.min.js laden. Ihre Navigation ist das erste, was auf der Seite gerendert wird. Wenn Sie also Ihre Skripte am Ende Ihres HTML-Codes haben, verlieren Sie jegliche JavaScript-Funktionalität.

Chris Johnson
quelle

0

Ich hatte das gleiche Problem nur auf Mobilgeräten, aber für eine Angular-Anwendung, und dies habe ich getan:

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

Ich hoffe es hilft :)

Stathoula
quelle

-2

Mein Menü ist kein Standardmenü für die Navigationsleiste, aber ich habe es geschafft, mein Menü mithilfe einer "onclick" -Funktion und eines ".click ()" automatisch zu reduzieren.

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

Das reduzierte Menü von Bootstrap 3 wird beim Klicken nicht geschlossen

Antworten: