Heim >Web-Frontend >CSS-Tutorial >Wie reduziere ich eine Bootstrap 3-Navigationsleiste bei einem Klick von außen?

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

Susan Sarandon
Susan SarandonOriginal
2024-11-29 01:16:11422Durchsuche

How to Collapse a Bootstrap 3 Navbar on Outside Click?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn