Heim > Web-Frontend > CSS-Tutorial > Wie kann ich dafür sorgen, dass die Dropdown-Menüumschaltung sowohl auf Maus- als auch auf Touch-Geräten funktioniert?

Wie kann ich dafür sorgen, dass die Dropdown-Menüumschaltung sowohl auf Maus- als auch auf Touch-Geräten funktioniert?

Linda Hamilton
Freigeben: 2024-12-06 20:07:15
Original
423 Leute haben es durchsucht

How Can I Make a Dropdown Menu Toggle Work on Both Mouse and Touch Devices?

Dokumentieren Sie die .click-Funktion für Touch-Geräte

Um ein Dropdown-Menü auf einem Touch-Gerät umzuschalten, können wir die .on( )-Ereignishandler, der sowohl auf Klick- als auch auf Berührungsereignisse im Dokument wartet. Der aktualisierte Code:

$(document).on('click touchstart', function() {

  if ( $(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }

});
Nach dem Login kopieren

Hier ist der Grund, warum das funktioniert:

Klickereignis:
Das Klickereignis wird normalerweise durch einen Mausklick ausgelöst, aber moderne Browser Lösen Sie dieses Ereignis auch aus, wenn Sie auf einen Touchscreen tippen.

Touchstart Ereignis:
Das Touchstart-Ereignis wird ausgelöst, sobald ein Element berührt wird. Dadurch wird sichergestellt, dass die Funktion auch auf Geräten ausgelöst wird, die das Standard-Klickereignis für Berührungseingaben möglicherweise nicht unterstützen.

Durch die Verwendung von Durch den .on()-Ereignishandler mit den Ereignissen „click“ und „touchstart“ stellen wir sicher, dass die Funktion unabhängig von der Eingabemethode (entweder Mausklick oder Berührung) ausgeführt wird. Dadurch können Benutzer das Dropdown-Menü sowohl auf Desktop- als auch auf Touch-Geräten konsistent umschalten.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass die Dropdown-Menüumschaltung sowohl auf Maus- als auch auf Touch-Geräten funktioniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage