suchen
HeimWeb-FrontendCSS-TutorialWie reduziere ich eine Bootstrap 3-Navigationsleiste bei einem Klick von außen?

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
Welches CSS ist großartig am sinnvollsten, wenn Sie CSS nicht gut kennen?Welches CSS ist großartig am sinnvollsten, wenn Sie CSS nicht gut kennen?Apr 19, 2025 am 09:56 AM

Peter-Paul veröffentlichte diese Frage:

Mit Clip-Pfad animierenMit Clip-Pfad animierenApr 19, 2025 am 09:52 AM

Clip-Pfad ist eines dieser CSS-Eigenschaften, von denen wir im Allgemeinen wissen, dass es da ist, aber aus irgendeinem Grund nicht nach irgendeinem Grund greifen. Es ist ein wenig einschüchternd im Sinne

Verwenden Sie den GraphQL -Spielplatz mit GatsbyVerwenden Sie den GraphQL -Spielplatz mit GatsbyApr 19, 2025 am 09:51 AM

Ich gehe davon aus, dass die meisten von Ihnen bereits von Gatsby gehört haben und zumindest locker wissen, dass es sich im Grunde genommen um einen statischen Site -Generator für React -Sites handelt. Es im Allgemeinen

Typen oder Tests: Warum nicht beides?Typen oder Tests: Warum nicht beides?Apr 19, 2025 am 09:50 AM

Hin und wieder entspannt eine Debatte über den Wert typisierter JavaScript. "Schreiben Sie einfach mehr Tests!" schreien einige Gegner. "Ersetzen Sie Unit -Tests durch Typen!"

Grafische Benutzeroberflächen für GitGrafische Benutzeroberflächen für GitApr 19, 2025 am 09:46 AM

Lemme rundet zusammen, was heutzutage wie die großen Spieler für Git -GUIs aussieht.

Tipps zum Rollen Ihres eigenen faulen LadensTipps zum Rollen Ihres eigenen faulen LadensApr 19, 2025 am 09:44 AM

Sie haben vielleicht gehört (oder sogar den Anruf ausgegeben), dass „wir einfach faul laden können!“ Bei der Suche nach einer Möglichkeit, eine besonders schwere Webseite zu schlank.

Drei Vorhersagen aus der Umfrage des Bundesstaates CSS 2019Drei Vorhersagen aus der Umfrage des Bundesstaates CSS 2019Apr 19, 2025 am 09:43 AM

Die Ausführung einer Entwicklerumfrage wie The State of CSS ist ein mehrstufiger Prozess. Zuerst müssen Sie die Daten sammeln. Dann verarbeiten Sie es in eine verwendbare Form.

Endlich ... ein Beitrag über endlich in VersprechungenEndlich ... ein Beitrag über endlich in VersprechungenApr 19, 2025 am 09:39 AM

"Wann fängt es endlich in einem JavaScript -Versprechen ab?" Dies ist eine Frage, die mir kürzlich in einem Workshop gestellt wurde, und ich dachte, ich würde einen kleinen Beitrag aufschreiben, um jeden zu klären

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft