Wie reduziere ich eine Bootstrap 3-Navigationsleiste bei einem Klick von außen?

Ausblenden einer Bootstrap 3-Navigationsleiste durch Klicken außerhalb ihrer Elemente

Frage: Wie können Sie eine geöffnete Bootstrap 3-Navigationsleiste automatisch minimieren, wenn Sie außerhalb ihrer Elemente klicken? Grenzen? Standardmäßig können Sie es nur über die Umschalttaste in der Navigationsleiste öffnen oder schließen.

Beispiel:

[Beispiel und Code](Link)

Erste Versuche:

Der bereitgestellte Code hat nicht funktioniert Arbeit:

jQuery(document).click(function() {

});

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

Lösung:

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

Erklärung:

Dieser Code:

• Hört auf Klicks irgendwo im Dokument.
• Überprüft, ob die Die Navigationsleiste ist geöffnet und das angeklickte Element ist nicht die Schaltfläche zum Umschalten der Navigationsleiste.
• Wenn beide Bedingungen erfüllt sind, wird ein Klick auf die Schaltfläche zum Umschalten der Navigationsleiste simuliert, wodurch die Navigationsleiste effektiv ausgeblendet wird.

Dieser Ansatz bewahrt die Animation der Navigationsleiste und ist benutzerfreundlicher als das manuelle Festlegen von CSS-Klassen.

Das obige ist der detaillierte Inhalt vonWie reduziere ich eine Bootstrap 3-Navigationsleiste bei einem Klick von außen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!