Warum bleibt die reduzierte Bootstrap 3-Navigation geöffnet, nachdem ich auf Menülinks geklickt habe?

Die reduzierte Navigation von Bootstrap 3 bleibt geöffnet, nachdem auf Menü-Links geklickt wurde

In einem typischen Bootstrap 3-Navigationssetup wird auf Menü-Links in einem reduzierten Menü geklickt sollte dazu führen, dass das Menü automatisch geschlossen wird. Bei einigen Benutzern ist jedoch ein Problem aufgetreten, bei dem das Menü nach der Auswahl eines Menülinks geöffnet bleibt.

Verstehen des Problems

Das Problem entsteht, weil das Standardverhalten des Bootstrap zusammenbricht Das Plugin dient dazu, die Sichtbarkeit des Elements umzuschalten, wenn auf die Auslöseschaltfläche geklickt wird. Dies bedeutet, dass das Klicken innerhalb des reduzierten Menüs selbst, einschließlich der Menülinks, die Reduzierungsaktion nicht auslöst.

Lösung

Um dieses Problem zu lösen, ein JavaScript-Ereignis-Listener können dem Dokument hinzugefügt werden. Dieser Listener erkennt, wenn ein Benutzer in die minimierte Navigation klickt, und blendet sie automatisch aus. Hier ist ein Beispielcode:

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});

Erklärung

• $(document).on bindet einen Ereignis-Listener an das Dokument für Klicks auf Elemente, die dem Selektor entsprechen .navbar-collapse.in. Dadurch wird sichergestellt, dass das Ereignis nur ausgelöst wird, wenn die Navigation ausgeblendet ist.
• Die if-Bedingung prüft, ob das angeklickte Element (e.target) ein Anker ist Tag, der kein Dropdown-Schalter ist („".dropdown-toggle"). Dropdown-Schalter sind ausgeschlossen, um zu verhindern, dass das Menü beim Zugriff auf die Untermenüs ausgeblendet wird.
• Wenn die Bedingung erfüllt ist, wird die Methode „collaps('hide“)“ für das angeklickte Element aufgerufen, wodurch die Navigation ausgeblendet wird.

Diese Lösung stellt sicher, dass das reduzierte Menü automatisch geschlossen wird, wenn Benutzer auf Menülinks klicken, und sorgt so für ein nahtloses und benutzerfreundliches Navigationserlebnis.

Das obige ist der detaillierte Inhalt vonWarum bleibt die reduzierte Bootstrap 3-Navigation geöffnet, nachdem ich auf Menülinks geklickt habe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!