Verhindern des Schließens von Dropdown-Menüs bei internen Klicks

Um zu verhindern, dass Twitter Bootstrap-Dropdown-Menüs geschlossen werden, wenn auf ein internes Element geklickt wird, eine Lösung, die dies umgeht Die delegierte Klickereignisbehandlung ist erforderlich. Hier ist eine ausführliche Erklärung und ein Lösungsvorschlag:

Standardmäßig werden Twitter Bootstrap-Dropdown-Menüs bei jedem Klick geschlossen, auch innerhalb des Menüs selbst. Um dieses Verhalten zu überwinden, besteht ein gängiger Ansatz darin, einen Click-Event-Handler an das Dropdown-Menü anzuhängen und event.stopPropagation() aufzurufen, um die Ereignisweitergabe zu verhindern.

Bei Setups, die Komponenten wie Karussellsteuerungen verwenden, ist jedoch das delegierte Ereignis Der Handhabungsmechanismus von Twitter Bootstrap kann das beabsichtigte Verhalten beeinträchtigen. In solchen Fällen löst das Klicken auf diese Steuerelemente möglicherweise nicht die erwartete Aktion aus, da das Ereignis die delegierten Ereignishandler nicht erreicht.

Das Verlassen auf Dropdown-Ereignisse zum Ausblenden/Ausblenden ist keine praktikable Alternative, da diesen Ereignissen wesentliche Informationen fehlen Kontrolle über den Dropdown-Inhalt.

Vorgeschlagene Lösung

Eine effektive Lösung besteht darin, die Ereignisdelegierung für ein Containerelement zu verwenden, das das Dropdown-Menü enthält. Hier ist ein Beispiel:

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});

In diesem Beispiel wird das Ereignis durch Klicken auf Elemente im angegebenen Container weiterhin an die jeweiligen delegierten Handler weitergegeben. Klicks speziell auf das Dropdown-Menü werden jedoch abgefangen und event.stopPropagation() verhindert das Schließverhalten des Dropdown-Menüs.