Bootstrap schließen reaktionsschnelles Menü "on click"

Wenn Sie auf "PRODUKTE" klicken, schiebe ich ein weißes Div nach oben (siehe Anhang). Im reaktionsschnellen Modus (Handy und Tablet) möchte ich die reaktionsfähige Navigationsleiste automatisch schließen und nur den weißen Balken anzeigen.

Ich habe es versucht:

$('.btn-navbar').click();  

auch versucht:

$('.nav-collapse').toggle();

Und es funktioniert. In der Desktop-Größe wird es jedoch auch aufgerufen und macht etwas Ungewöhnliches im Menü, wo es für eine Sekunde schrumpft.

Irgendwelche Ideen?

Ich muss mit Animation arbeiten!

Menü in HTML:

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
 </div>

Bindungsklickereignis für alle Elemente in der Navigation zum Reduzieren-Menü (Bootstrap-Kollaps-Plugin):

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

BEARBEITEN Um es allgemeiner zu gestalten, können wir das folgende Code-Snippet verwenden

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

Sie müssen kein zusätzliches Javascript zu dem hinzufügen, was bereits in der Option zum Reduzieren von Bootstraps enthalten ist. Fügen Sie stattdessen einfach Datenumschalt- und Datenziel-Selektoren in Ihre Menülistenelemente ein, genau wie Sie es mit Ihrer Navbar-Umschalttaste tun. Für Ihren Menüpunkt Produkte würde dies also so aussehen

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

Dann müssten Sie die Datenumschalt- und Datenzielauswahl für jeden Menüpunkt wiederholen

BEARBEITEN!!! Um Überlaufprobleme zu beheben und bei diesem Fix zu flackern, füge ich weiteren Code hinzu, der dies behebt und immer noch kein zusätzliches Javascript enthält. Hier ist der neue Code:

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

Hier ist es bei der Arbeit http://jsfiddle.net/jaketaylor/84mqazgq/

Dadurch werden Ihre Umschalt- und Zielauswahl für die Bildschirmgröße spezifisch und Störungen im größeren Menü werden vermieden. Wenn jemand immer noch Probleme mit Störungen hat, lassen Sie es mich bitte wissen und ich werde eine Lösung finden. Vielen Dank

BEARBEITEN : Im Bootstrap v4.1.3 konnte ich keine sichtbaren / versteckten Klassen verwenden. Anstelle von hidden-xsGebrauch d-none d-sm-blockund statt visible-xsGebrauch d-block d-sm-none.

Ich denke, Sie sind alle über Engineering ..

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

BEARBEITEN: Um sich um Untermenüs zu kümmern, stellen Sie sicher, dass auf ihrem Umschaltanker die Dropdown-Umschaltklasse vorhanden ist.

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

BEARBEITEN 2: Unterstützung für Telefonberührung hinzufügen.

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });

Jake Taylors Idee, es ohne zusätzliches JavaScript zu machen und den Zusammenbruch von Bootstrap zu nutzen, hat mir sehr gut gefallen. Ich habe festgestellt, dass Sie das Problem "Flackern" beheben können, wenn sich das Menü nicht im reduzierten Modus befindet, indem Sie den data-targetSelektor leicht ändern, um die inKlasse einzuschließen. So sieht es aus:

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

Ich habe es nicht mit verschachtelten Dropdowns / Menüs getestet, also YMMV.

Nur um vollständig zu sein, hat in Bootstrap 4.0.0-Beta die Verwendung von .show für mich funktioniert ...

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

Ich gehe davon aus, dass Sie eine Linie wie diese haben, die den Navigationsbereich definiert, basierend auf Bootstrap-Beispielen und allem

<div class="nav-collapse collapse" >

Fügen Sie einfach die Eigenschaften als solche hinzu, wie auf der Schaltfläche MENÜ

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

Ich habe hinzugefügt <body> , gearbeitet. Ich kann nicht sagen, dass ich ein Profil erstellt habe oder so, aber es scheint mir ein Vergnügen zu sein ... bis Sie auf eine zufällige Stelle der Benutzeroberfläche klicken, um das Menü zu öffnen, also nicht so gut.

DK

Dies funktioniert, wird aber nicht animiert.

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

Im HTML hat ich eine Klasse von nav-Link zu dem einem Tag jeden Navigationslink.

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);

Diese Lösung funktioniert gut auf Desktop und Mobile.

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">

Fügen Sie diesen Code zu $ ​​(document) .ready (function () {}) hinzu, um die Lösung von user1040259 zu erläutern.

    $('.nav').click( function() {
        $('.btn-navbar').addClass('collapsed');
        $('.nav-collapse').removeClass('in').css('height', '0');
    });

Wie bereits erwähnt, wird dadurch die Bewegung nicht animiert, aber die Navigationsleiste bei der Elementauswahl wird geschlossen

Für diejenigen, die AngularJS und Angular UI Router verwenden, ist hier meine Lösung (mit Mollwe's Toggle). Wobei ".navbar-main -apse" mein "Datenziel" ist.

Direktive erstellen:

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

Richtlinie verwenden:

<div class="collapse navbar-collapse navbar-main-collapse">
    <your menu>

Dies sollte den Trick tun.

Benötigt bootstrap.js.

Beispiel => http://getbootstrap.com/javascript/#collapse

    $('.nav li a').click(function() {
      $('#nav-main').collapse('hide');
    });

Dies entspricht dem Hinzufügen der Attribute 'data-toggle = "apse "und' href =" yournavigationID "'zu Navigationsmenü-Tags.

Ich benutze die Mollwe-Funktion, obwohl ich 2 Verbesserungen hinzugefügt habe:

a) Vermeiden Sie das Schließen der Dropdown-Liste, wenn der angeklickte Link reduziert ist (einschließlich anderer Links).

b) Blenden Sie das Dropdown-Menü auch aus, wenn Sie auf den sichtbaren Webinhalt klicken.

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

            });

Nicht der neueste Thread, aber ich suchte nach einer Lösung für das gleiche Problem und fand eine (eine Mischung aus einigen anderen).

Ich gab den NavButton:

<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

eine ID / Kennung wie:

 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Nicht die beste "Idee" - aber: Funktioniert für mich! Jetzt können Sie die Sichtbarkeit Ihrer Schaltfläche (mit jquery) wie folgt überprüfen:

 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }

(HINWEIS: Dies ist nur ein abgeschnittener Code! Ich habe ein "Onclick" -Ereignis für meine Navigationslinks verwendet! (Starten eines AJAX-Reguest.)

Das Ergebnis ist: Wenn die Schaltfläche "sichtbar" ist, wurde sie "angeklickt" ... Also: Kein Fehler, wenn Sie die "Vollbildansicht" von Bootstrap verwenden (Breite über 940px).

Grüße Ralph

PS: Es funktioniert gut mit IE9, IE10 und Firefox 25. Andere wurden nicht überprüft - aber ich kann kein Problem erkennen :-)

Das hat bei mir funktioniert. Wenn ich auf die Menüschaltfläche klicke, füge ich die Klasse 'in' hinzu oder entferne sie, weil durch Hinzufügen oder Entfernen dieser Klasse der Umschalter standardmäßig funktioniert. 'e.stopPropagation ()' dient zum Stoppen der Standardanimation per Bootstrap (ich denke). Sie können auch die 'toggleClass' anstelle der Klasse add oder remove verwenden.

$ ('# ChangeToggle'). On ('click', Funktion (e) {

        if ($('.navbar-collapse').hasClass('in')) {
            $('.navbar-collapse').removeClass('in');
            e.stopPropagation();
        } else {
            $('.navbar-collapse').addClass('in');
            $('.navbar-collapse').collapse();
        }

    });

Sie können verwenden

ul.nav {
    display: none;
}

Dadurch wird die Navigationsleiste standardmäßig geschlossen. Bitte lassen Sie mich wissen, dass jemand dies nützlich findet

Wenn Ihr umschaltbares Symbol beispielsweise nur für besonders kleine Geräte sichtbar ist, können Sie Folgendes tun:

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

Wenn Sie auf [data-toggle = "offcanvas"] klicken, werden die .hidden-xs von bootstrap zu meinem # Seitenmenü hinzugefügt, wodurch der Inhalt des Seitenmenüs ausgeblendet wird. Wenn Sie das Fenster vergrößern, wird es jedoch wieder sichtbar.

wenn Menü HTML ist

<div id="nav-main" class="nav-collapse collapse">
     <ul class="nav">
         <li>
             <a href='#somewhere'>Somewhere</a>
         </li>
     </ul>
</div>

on nav toggle 'in' Klasse wird hinzugefügt und aus dem Toggle entfernt. Überprüfen Sie, ob das Reaktionsmenü geöffnet ist, und führen Sie dann das Schließen um.

$('.nav-collapse .nav a').on('click', function(){
    if ( $( '.nav-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

Tuggle Nav Close, IE-Browser-kompatible Antwort, ohne Konsolenfehler. Wenn Sie Bootstrap verwenden, verwenden Sie dies

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})

$('.navbar-toggle').trigger('click');

Bootstrap 4-Lösung ohne Javascript

Fügen Sie dem data-toggle="collapse" data-target="#navbarSupportedContent.show" div Attribute hinzu<div class="collapse navbar-collapse">

Stellen Sie sicher , dass Sie den richtigen idindata-target

<div className="collapse navbar-collapse" id="navbarSupportedContent" data-toggle="collapse" data-target="#navbarSupportedContent.show">

.show ist zu vermeiden, dass das Menü bei großen Auflösungen flackert

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