Wie kann ich ein Dropdown-Menü sowohl auf Touch- als auch auf Desktop-Geräten zuverlässig schließen?

Touch-Geräteunterstützung für Document .click-Funktion

Bei der Arbeit mit responsiven Websites ist es wichtig sicherzustellen, dass alle Funktionen auf beiden Desktops erhalten bleiben und Touch-Geräte. Bestimmte Ereignisse, wie z. B. die Dokument-Klickfunktion, funktionieren jedoch möglicherweise nicht wie erwartet auf Touchscreens.

Problem:

Ein Unternavigation-Dropdown wird mit a umgeschaltet jQuery .click-Ereignis für das übergeordnete Listenelement. Das Klicken auf eine beliebige Stelle auf dem Bildschirm zum Schließen des Dropdown-Menüs funktioniert jedoch auf Touch-Geräten nicht.

Lösung:

Moderne Browser unterstützen jetzt Klickereignisse für Tippinteraktionen, also die Verwendung document .click sollte ausreichen. Ältere Browser erfordern jedoch möglicherweise ein zusätzliches Touch-Ereignis:

$(document).on('click touchstart', function () {
  if ( $(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }
});

Erklärung:

Das Touchstart-Ereignis wird sofort ausgelöst, wenn eine Berührung erkannt wird, und bietet so einen Fallback für Geräte die keine Klickereignisse für Taps unterstützen. Das Klickereignis bleibt bestehen, um sowohl Klick- als auch Tippinteraktionen in modernen Browsern zu verarbeiten.

Durch die Kombination beider Ereignisse stellen Sie sicher, dass das Dropdown-Menü durch Klicken oder Tippen auf eine beliebige Stelle auf dem Bildschirm geschlossen werden kann, unabhängig vom verwendeten Gerät .

Das obige ist der detaillierte Inhalt vonWie kann ich ein Dropdown-Menü sowohl auf Touch- als auch auf Desktop-Geräten zuverlässig schließen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!