it-swarm.com.de

Bootstrap 3 ausgeblendetes Menü wird beim Klicken nicht geschlossen

Ich habe eine mehr oder weniger standardmäßige Navigation 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 bricht es normalerweise zusammen. Durch Klicken auf die Menüschaltfläche wird das Menü erweitert. Wenn ich jedoch auf einen Menülink klicke (oder tippe), bleibt das Menü geöffnet. Was muss ich tun, um es wieder zu schließen?

119
Paranoia

In der Standardeinstellung von Bootstrap bleibt das Menü geöffnet, wenn Sie auf einen Menüeintrag klicken. Sie können dieses Verhalten manuell überschreiben, indem Sie .collapse('hide'); für das jQuery-Element aufrufen, das Sie reduzieren möchten.

47
VCNinc

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). Es wird nur aufgerufen, wenn das Menü bereits erweitert ist. Einige Leute haben berichtet, dass seltsames Blinken, wenn das Menü geöffnet und dann sofort geschlossen wird, mit anderem Code, der nicht überprüft hat, ob das Menü die "In" -Klasse hat.

[UPDATE 2014-11-04] Anscheinend können bei der Verwendung von Untermenüs die oben genannten Probleme verursachen, sodass die oben genannten geändert wurden zu:

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

Ä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/901

121
FullStackDev

Ich hatte das gleiche Problem, aber durch das zweimalige Einfügen von bootstrap.js und jquery.js Dateien.

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

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

Dies würde bei der Handhabung des Dropdowns in der Navigationsleiste helfen

16
Chakradhar Vyza

Ich habe/hatte ähnliche Probleme mit Bootstrap 4, alpha-6 und Joakim Johansson Die Antwort oben hat mich in die richtige Richtung geführt. Kein Javascript erforderlich. Daten eingeben -target = ". navbar-collapse" und data-toggle = "collapse" in das div-Tag innerhalb des Navis, aber um die Links/Buttons herum, funktionierten für mich.

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

Ich weiß, dass diese Frage für Bootstrap ist, aber wenn Sie eine Lösung für Bootstrap 4 suchen, tun Sie einfach Folgendes:

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

Ich tat

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

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

5
Densol

Obwohl die zuvor veröffentlichte Lösung zum Ändern des Menüelements selbst, wie unten, funktioniert, wenn sich das Menü auf einem kleinen Gerät befindet, hat sie einen Nebeneffekt, wenn das Menü auf voller Breite und erweitert ist kann dazu führen, dass eine horizontale Bildlaufleiste über Ihre Menüelemente gleitet . 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, dass Sie so geantwortet haben, ich wollte dieser Antwort einen Kommentar hinzufügen, aber anscheinend habe ich nicht genug Kredit, um Bemerkungen zu machen.)

4
Wim Van Houts
 $(function(){ 
    var navMain = $("#your id");
    navMain.on("click", "a", null, function () {
      navMain.collapse('hide');
    });
});
2
Chit

Wenn Sie möchten, dass Ihre Navigation nur bei Verwendung auf einem mobilen Bildschirm umschaltet, können Sie Ihren a-Elementen data-toggle="collapse" Und data-target="#navbar" Hinzufügen. Beim Klicken auf diese Option wird jedoch ein seltsames Flimmern angezeigt auf einem Desktop-Bildschirm. Die jQuery-Lösungen funktionieren nicht gut, wenn Sie sich in einer Aurelia- oder Angular -Umgebung befinden.

Für mich war die beste Lösung, ein benutzerdefiniertes Attribut zu erstellen, das die entsprechende Medienabfrage abhört und bei Bedarf das Attribut data-toggle="collapse" 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);
      }
    }
  }
}
1
halllo

Vergewissern Sie sich, dass Sie die neueste Version von bootstrap= js verwenden. Ich hatte das gleiche Problem und nur das Upgrade der Datei bootstrap.js von bootstrap-3.3.6 hat die Magie ausgelöst.

1
Aman Arun

Falls Sie dieses Verhalten manuell überschreiben möchten, indem Sie .collapse ('hide') innerhalb einer Winkelanweisung aufrufen, finden Sie hier den 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>
1
Mirna De Jesus

Ich hatte ein ähnliches Problem, aber mein Problem blieb nicht offen. Es öffnete/schloss sich schnell. Ich stellte fest, dass jquery-1.11.1.min.js geladen wurde, bevor bootstrap.min.js geladen wurde. Also habe ich die Reihenfolge dieser 2 Dateien umgekehrt und mein Menü repariert. Läuft jetzt einwandfrei. Ich hoffe es hilft

0
Vasko

Ich hatte das gleiche Problem nur auf dem Handy, aber für eine Angular Anwendung, und das 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 :)

0
stathoula

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

Ich fand, dass nach viel Mühe, Versuch und Irrtum, die beste Lösung für mich auf jsfiddle. Link zur Inspiration auf jsfiddle.net . Ich benutze Bootstraps Navbar-Fixed-Top mit Collapse und Hamburger-Toggle. Hier ist meine Version von jsfiddle: jsfiddle Scrollspy navbar . Ich habe nur grundlegende Funktionen anhand der Anweisungen auf getbootsrap.com erhalten. 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 Teils von js (das einige der in den obigen Threads erwähnten Elemente enthält) einige Scrollspy-Probleme für mich löste, darunter:

  1. Das ausgeblendete/umgeschaltete Navigationsmenü wird ausgeblendet, wenn auf "Abschnitt" der Navigation (z. B. href = "# foobar") geklickt wird (Problem beim Adressieren dieses Threads).
  2. Aktiver "Abschnitt" wurde erfolgreich markiert (dh js erfolgreich erstellte Klasse = "aktiv")
  3. Die lästige vertikale Bildlaufleiste, die bei zusammengeklappten Navigationsgeräten (nur auf kleinen Bildschirmen) gefunden wurde, wurde entfernt.

HINWEIS: Im unten gezeigten js-Code (aus dem zweiten jsfiddle-Link in meinem Beitrag):

topMenu = $ ("# myScrollspy"),

... der Wert "myScrollspy" muss mit der ID = "" in Ihrem HTML übereinstimmen ...

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

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

0
Adam Calihman

Alles was Sie brauchen ist data-target = ". Navbar-collapse" 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>
0
Marodo

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

Beispiel:

JS :

$scope.toogleMyClass  = function(){

    //dropdown-element

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

};

Haken Sie diese Funktion an onClick einfach funktioniert bei mir.

0
yasir_mughal

Das Problem könnte sein, dass Sie veraltete Versionen von bootstrap oder jquery, OR Sie rufen mehr als eine Version in Ihrem Markup auf.

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

0
Nick

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 einfügte, funktionierte einfach alles.

0
Roland

vielleicht möchten Sie nur sicherstellen, dass Sie Ihr jQuery- und Bootstrap.min.js-ATF laden. Ihre Navigation wird als erstes auf der Seite gerendert. Wenn Sie also Ihre Skripte im unteren Bereich Ihres HTML-Codes haben, verlieren Sie jegliche JavaScript-Funktionalität.

0
Chris Johnson