Wie schließe ich eine Bootstrap-Navigationsleiste bei einem externen Klick?

Schließen einer geöffneten Navigationsleiste bei externem Klick mit Bootstrap

Beim Arbeiten mit einer reduzierten Navigationsleiste in Bootstrap 3 ist es nützlich, diese schließen zu können Sie können es aufrufen, indem Sie außerhalb des Navigationsleistenbereichs klicken. Um dies zu erreichen, können Sie den folgenden JavaScript-Code verwenden:

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

Dieser Code überwacht alle Dokumentklicks. Wenn ein Klick außerhalb des Navigationsleistenelements erkannt wird (wie durch die Clickover-Variable bestimmt), prüft es, ob die Navigationsleiste derzeit geöffnet ist (_opened). Wenn die Navigationsleiste geöffnet ist und das angeklickte Element nicht die Schaltfläche „Navbar-Toggle“ ist, wird ein Klick auf die Umschaltschaltfläche ausgelöst, wodurch die Navigationsleiste effektiv geschlossen wird.

Der von Ihnen bereitgestellte Codeausschnitt funktioniert nicht, weil er funktioniert Überprüfen Sie nicht, ob die Navigationsleiste bereits geöffnet ist, bevor Sie versuchen, sie zu schließen. Darüber hinaus wird jQuery('.navbar').click(...) verwendet, das auch bei Klicks innerhalb der Navigationsleiste ausgelöst wird und verhindert, dass externe Klicks diese schließen.

Durch die Verwendung des geänderten Codes, der in bereitgestellt wird Antwort: Sie können sicherstellen, dass eine geöffnete Navigationsleiste geschlossen wird, wenn Sie außerhalb davon klicken, was die Benutzererfahrung und den Navigationsfluss verbessert.

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