Wie schließe ich eine zusammenklappbare Bootstrap 3-Navigationsleiste mit externen Klicks?

Schließen einer klappbaren Navigationsleiste mit externen Klicks in Bootstrap 3

Zur Verbesserung der Benutzererfahrung durch Umschalten der Navigationsleiste gehört die Möglichkeit, eine geöffnete Navigationsleiste zu schließen Klicken außerhalb seiner Grenzen. Der bereitgestellte Code versucht, dieses Problem zu beheben, indem er den document.click-Ereignis-Listener verwendet. Allerdings reicht die Implementierung derzeit nicht aus, um die gewünschte Funktionalität zu erreichen.

Lösung:

Der folgende Codeausschnitt löst das Problem effektiv, indem er dokumentenweite Klicks überwacht. Dabei wird untersucht, ob das angeklickte Element innerhalb des Navbar-Elements liegt. Wenn die Navigationsleiste geöffnet ist (bestimmt durch das Vorhandensein der Klasse „navbar-collapse in“) und das angeklickte Element nicht über die Klasse „navbar-toggle“ verfügt, löst das Klickereignis effektiv einen Klick auf die Schaltfläche „navbar-toggle“ aus Reduzieren der Navigationsleiste.

$(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 Ansatz vereint sowohl Eleganz als auch Funktionalität und sorgt für ein nahtloses Schließen geöffneter Navigationsleisten bei Klicks außerhalb dieser.

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