web-dev-qa-db-de.com

Bootstrap close responsive menu "on click"

Bei "PRODUKTE" klicke ich ein weißes Div nach oben (wie im Anhang). Wenn Sie sich in responsive (Handy und Tablet) befinden, möchte ich die responsive Navbar automatisch schließen und nur die weiße Leiste anzeigen. 

Ich habe es versucht:

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

auch versucht:

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

Und es funktioniert. In der Desktopgröße wird es jedoch auch aufgerufen und macht etwas funky für das Menü, wo es für eine Sekunde schrumpft. 

Irgendwelche Ideen?

enter image description here

javascripthtmlcsstwitter-bootstrap
80
user1040259

Ich habe es mit Animation zu tun!

Menü in HTML:

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

Verbindliches Klickereignis für alle a Elemente in der Navigation, um das Menü auszublenden (Bootstrap-Plugin "collapse"):

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

EDIT Um es allgemeiner zu machen, 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');
     });
 });
90
mollwe

Sie müssen kein zusätzliches Javascript zu dem hinzufügen, was bereits mit der Option zum Reduzieren von Bootstraps enthalten ist. Schließen Sie stattdessen einfach die Datenumschalt- und Datenziel-Auswahlelemente in Ihre Menülistenelemente ein, genau wie Sie es mit Ihrer Navbar-Umschaltfläche tun. Für Ihren Menüpunkt Artikel würde es 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 und Flimmern bei diesem Fix zu beheben, füge ich noch etwas Code hinzu, der das Problem behebt und immer noch kein zusätzliches Javascript hat. 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 die Toggle- und Target-Selektoren auf die Bildschirmgröße angepasst und Störungen im größeren Menü vermieden. Wenn noch Probleme mit Störungen auftreten, lass es mich wissen und ich werde eine Lösung finden. Vielen Dank

EDIT: In der Bootstrap v4.1.3 konnte ich keine sichtbaren/versteckten Klassen verwenden. Verwenden Sie anstelle von hidden-xsd-none d-sm-block und anstelle von visible-xsd-block d-sm-none.

128
Jake Taylor

Ich denke, du bist alles über Technik.

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

BEARBEITEN: Um auf Untermenüs zu achten, stellen Sie sicher, dass der Toggle-Anker die Dropdown-Toggle-Klasse enthält.

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

BEARBEITEN 2: Fügen Sie Unterstützung für das Telefon hinzu.

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

Ich mochte Jake Taylors Idee, dies ohne zusätzliches JavaScript zu tun und Bootstraps Umbruch zu nutzen. Ich habe festgestellt, dass Sie das Problem des "Flimmerns" beheben können, wenn sich das Menü nicht im ausgeblendeten Modus befindet, indem Sie den data-target-Selektor etwas ändern, um die in-Klasse aufzunehmen. So sieht es so 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, so YMMV.

34
Luke Tillman

nur um vollständig zu sein, in Bootstrap 4.0.0-beta mit .show arbeitete ich.

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

Das funktioniert, animiert aber nicht.

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

Ich gehe davon aus, dass Sie eine Zeile wie diese haben, die den Nav-Bereich definiert, basierend auf Bootstrap-Beispielen und allen anderen

<div class="nav-collapse collapse" >

Fügen Sie einfach die Eigenschaften als solche hinzu, wie auf der MENU-Taste

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

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

DK

4
Douglas 'DK' Knudsen

Im HTML habe ich eine Klasse hinzugefügt nav-Link zum ein Tag jedes Navigationslinks.

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

diese Lösung funktioniert gut, sowohl auf dem Desktop als auch auf dem Handy.

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

Für diejenigen, die AngularJS und Angular UI Router mit diesem verwenden, ist hier meine Lösung (mit dem Umschalter von Mollwe) . ".Navbar-main-collapse" ist mein "Datenziel".

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

Anwendungsrichtlinie:

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

Um die Lösung von Benutzer1040259 zu buchstabieren, fügen Sie diesen Code Ihrem $ (document) .ready (function () {}) hinzu. 

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

Wie gesagt, das animiert den Zug nicht ... aber es schließt die Navigationsleiste bei der Artikelauswahl

2
CharlesA

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

Ich gab den NavButton:

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

eine id/identifikator wie:

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

Nicht die schönste "Idee" - aber: Funktioniert für mich! Jetzt können Sie die Sichtbarkeit Ihres Buttons (mit jquery) wie folgt überprüfen:

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

(HINWEIS: Dies ist nur ein Code-Ausschnitt! Ich habe ein "onclick" -Ereignis für meine Nav-Links verwendet! (Starten eines AJAX Reguest.)

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

Grüße Ralph

PS: Es funktioniert gut mit IE9, IE10 und Firefox 25. Andere nicht geprüft - aber ich sehe kein Problem :-)

1
Ralph D.

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 das Hinzufügen oder Entfernen dieser Klasse der Toggle standardmäßig funktioniert. 'e.stopPropagation ()' dient zum Stoppen der Standardanimation durch Bootstrap (ich denke mal). Sie können auch die 'toggleClass' anstelle von add oder remove class verwenden.

$ ('# ChangeToggle'). Ein ('Klick', Funktion (e) {

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

    });
1
Goutami

Das sollte den Trick tun.

Benötigt bootstrap.js.

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

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

Dies geschieht genauso wie das Hinzufügen der Attribute 'data-toggle = "collapse" "und" href = "yournavigationID" "zu den Navigationsmenüs.

1
Jussi Järviö

Ich verwende die Mollwe-Funktion, obwohl ich zwei 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 auch die Dropdown-Liste 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');
                    }
                });

            });
1
Arco Voltaico

Bootstrap 4-Lösung ohne Javascript

Attribute data-toggle="collapse" data-target="#navbarSupportedContent.show" zum div <div class="collapse navbar-collapse"> hinzufügen 

Stellen Sie sicher, dass Sie die richtige id in data-target angeben.

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

.show dient zum Vermeiden des Flimmerns von Menüs in großen Auflösungen

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

0
kiranvj

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

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

wenn das Menü HTML ist 

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

bei der Navigation wird die 'in' -Klasse hinzugefügt und aus dem Schalter entfernt. Prüfen Sie, ob das responsive Menü geöffnet ist, und führen Sie dann das Schließen aus.

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

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

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

Durch Klicken auf [data-toggle = "offcanvas"] wird das .hidden-xs von bootstrap zu meinem # Seitenmenü hinzugefügt, das den Inhalt des Seitenmenüs blendet, aber wieder sichtbar wird, wenn Sie die Fenstergröße vergrößern.

0
Kingsley Ijomah

Sie können es verwenden 

ul.nav {
    display: none;
}

Dadurch wird standardmäßig die Navigationsleiste geschlossen

0
Kris