Heim  >  Artikel  >  Web-Frontend  >  Wie kann verhindert werden, dass Twitter-Bootstrap-Dropdown-Menüs bei internen Klicks geschlossen werden?

Wie kann verhindert werden, dass Twitter-Bootstrap-Dropdown-Menüs bei internen Klicks geschlossen werden?

Susan Sarandon
Susan SarandonOriginal
2024-10-26 10:53:29583Durchsuche

How to Prevent Twitter Bootstrap Dropdown Menus from Closing on Internal Clicks?

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 die Dropdown-Menüs von Twitter Bootstrap 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 Verarbeitungsmechanismus 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 Ereignisdelegation für ein Containerelement zu verwenden, das das Dropdown-Menü enthält. Hier ist ein Beispiel:

<code class="js">$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});</code>

In diesem Beispiel wird das Ereignis durch Klicken auf Elemente innerhalb des angegebenen Containers 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.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Twitter-Bootstrap-Dropdown-Menüs bei internen Klicks geschlossen werden?. 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