Warum bleibt das minimierte Navigationsmenü von Bootstrap 3 geöffnet, nachdem ich auf einen Link geklickt habe?

Das minimierte Navigationsmenü von Bootstrap 3 bleibt beim Klicken geöffnet

Die Navigationsmenüs von Bootstrap 3 verfügen über eine praktische Funktion zum Minimieren für kleinere Geräte. Allerdings bleibt das Menü manchmal geöffnet, nachdem auf einen Menülink geklickt wurde. Dies kann frustrierend sein, wenn Sie möchten, dass das Menü nach der Auswahl eines Elements geschlossen wird.

Der folgende Code, der eine beliebte Lösung auf GitHub war, löst dieses Problem:

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

Dieser Code bindet ein Ereignis-Listener für das Dokument, der auf Klicks auf jedes Element innerhalb der erweiterten Navigationsleiste wartet. Wenn es sich bei dem angeklickten Element um ein Ankerelement handelt, wird das Menü ausgeblendet.

Um Probleme mit Untermenüs zu beheben, wurde der Code wie folgt geändert:

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

Dadurch wird sichergestellt, dass nur das Menü angezeigt wird Reduziert sich, wenn das angeklickte Element ein direkter Link und kein Dropdown-Schalter ist.

Das obige ist der detaillierte Inhalt vonWarum bleibt das minimierte Navigationsmenü von Bootstrap 3 geöffnet, nachdem ich auf einen Link geklickt habe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!