Heim >Web-Frontend >CSS-Tutorial >Warum bleibt das minimierte Navigationsmenü von Bootstrap 3 geöffnet, nachdem ich auf einen Link geklickt habe?

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

DDD
DDDOriginal
2024-12-22 08:25:10609Durchsuche

Why Does My Bootstrap 3 Collapsed Navigation Menu Stay Open After Clicking a Link?

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!

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