it-swarm.com.de

Wie kann eine geöffnete, minimierte Navigationsleiste geschlossen werden, wenn Sie außerhalb des Navigationselements in Bootstrap 3 klicken?

Wie kann ich eine geöffnete minimierte Navigationsleiste schließen, wenn Sie außerhalb des Navigationselements klicken? Derzeit ist die einzige Möglichkeit, sie zu öffnen oder zu schließen, die navbar-toggle-Schaltfläche.

Siehe hier für ein Beispiel und Code: 

Bisher habe ich Folgendes versucht, was nicht zu funktionieren scheint:

jQuery(document).click(function() {

});

jQuery('.navbar').click(function(event) {
    jQuery(".navbar-collapse").collapse('hide');
    event.stopPropagation();
});
33
henrywright

Schauen Sie sich das an:

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});

Ihre Geige funktioniert damit: http://jsfiddle.net/52VtD/5718/

Es ist eine modifizierte Version von dieser Antwort , der die Animation fehlt und auch ein bisschen komplizierter ist.

Ich weiß, dass das Anrufen von click() nicht sehr elegant ist, aber collapse('hide') hat auch nicht für mich funktioniert, und ich denke, dass die Animation etwas schöner ist, als das Hinzufügen und Entfernen der Klassen kaum.

40
nozzleman

Die akzeptierte Antwort scheint nicht richtig zu funktionieren. Es muss nur geprüft werden, ob "navbar-collapse" die Klasse "in" hat. Wir können dann die Kollapsmethode wie erwartet auslösen, indem wir unseren Verweis auf die Navigationsleiste verwenden.

$(document).click(function (event) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
});
36
Paul Tarr

Die Lösung, für die ich mich entschieden habe, wurde aus der hier akzeptierten Antwort übernommen und aus dieser Antwort

jQuery('body').bind('click', function(e) {
    if(jQuery(e.target).closest('.navbar').length == 0) {
        // click happened outside of .navbar, so hide
        var opened = jQuery('.navbar-collapse').hasClass('collapse in');
        if ( opened === true ) {
            jQuery('.navbar-collapse').collapse('hide');
        }
    }
});

Dadurch wird ein geöffnetes, ausgeblendetes Navigationsmenü ausgeblendet, wenn der Benutzer auf eine Stelle außerhalb des .navbar-Elements klickt. Natürlich kann durch Klicken auf .navbar-toggle auch das Menü geschlossen werden.

13
henrywright

Das funktioniert für mich.

$(function() {
  $(document).click(function (event) {
    $('.navbar-collapse').collapse('hide');
  });
});
12
Shiva Charan

stopPropagation() ist nicht immer die beste Lösung. Verwenden Sie eher etwas wie:

jQuery(document.body).on('click', function(ev){
    if(jQuery(ev.target).closest('.navbar-collapse').length) return; // Not return false

    // Hide navbar
});

Ich denke, es ist gefährlich anzunehmen, dass Sie niemals andere Ereignisse aus dem .navbar hören möchten. Welches ist unmöglich, wenn Sie stopPropagation() verwenden.

4
pstenstrm

Die Antwort von Nozzleman für Bootstrap 4 (.3.1):

$(document).ready(function () {
    $(document).click(
        function (event) {
            var target = $(event.target);
            var _mobileMenuOpen = $(".navbar-collapse").hasClass("show");
            if (_mobileMenuOpen === true && !target.hasClass("navbar-toggler")) {
                $("button.navbar-toggler").click();
            }
        }
    );
});

In ngOnInit () platziert.

Beim Laden des Dokuments wartet dieser Code auf Klickereignisse. Wenn die Dropdown-Liste für das mobile Menü geöffnet ist (dh der reduzierbare Teil der Navigationsleiste hat die Klasse "show") und das angeklickte Objekt (Ziel) nicht die Schaltfläche für das mobile Menü ist (dh nicht die Klasse "navbar-toggler" hat), dann Wir teilen der mobilen Menüschaltfläche mit, dass darauf geklickt wurde, und das Menü wird geschlossen.

1
KRN

Ich hatte ein Szenario, in dem ich keine Links hatte, und ich wollte nicht, dass das Panel geschlossen wird, wenn ein Benutzer bei einem Unfall auf diese Elemente klickt. Die anderen Antworten hier wird schließen das Bedienfeld, auch wenn Sie auf den Text eines Elements klicken, das kein Link ist.

Um dies zu beheben, fügte ich Paul Tarrs Antwort hinzu, indem ich die Lösung in eine Überprüfung einwickelte, um zu sehen, ob der Klick irgendwo in der 

if ($(event.target).parents(".navbar-collapse").length < 1) { }

Der vollständige Code würde zu:

$(document).click(function (event) {
if ($(event.target).parents(".navbar-collapse").length < 1) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
  }
});

In dieser Demo-Geige können Sie sehen, dass ein Klick auf einen Nicht-Link innerhalb des Panels nicht dazu führt, dass er nicht ausgeblendet wird.

1
maxshuty

Ich habe der Antwort von @ nozzleman eine Bedingung hinzugefügt, um zu überprüfen, ob auf ein Element innerhalb des Menüs geklickt oder geklickt wurde, und wenn dies der Fall ist, das Fenster nicht zu schließen.

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle") && clickover.parents('.navbar-collapse').length == 0) {
            $("button.navbar-toggle").click();
        }
    });
});
1
sonxurxo
$(document).click(function (event) {
 if ($('.navbar-collapse').attr('aria-expanded') == "true") {
        $('.navbar-collapse:visible').click();
    }
});
0
Venkanna t

Für Bootstrap 4:

$(document).click(function(event) {
  $(event.target).closest(".navbar").length || $(".navbar-collapse.show").length && $(".navbar-collapse.show").collapse("hide")
});
0
Timur

Für Bootstrap 4

Bootstrap 4 hat keine in-Klasse. Dies ist Coffeescript.

  $(document).click (e)->
    #console.log e.target
    unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
      $('#toggle-menu').collapse('hide')

Wenn Sie also nicht auf die Schaltfläche oder das Menü klicken, schließen Sie das Menü.

Hinweis: Seltsam, bei iOS wird durch Klicken auf Text kein Klickereignis oder ein Mouseup-Ereignis registriert. Durch Klicken auf ein Bild werden jedoch Ereignisse ausgelöst. 

0
Chloe
$(window).click(function (e) {
     if ($(e.target).closest('.codehim-dropdown').length) {
         return;
     }
     if ($(e.target).closest(offCanvas).length) {
         return;
     }

     //check if menu really opened
     if ($(hamburger).hasClass("active")) {
         closeMenu();
     }

     $(dimOverlay).fadeOut();

     $(".menu-items").slideUp();
     $(".dropdown-heading").removeClass("active");

});
0
muthu