Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membuat Togol Menu Turun Berfungsi pada Kedua-dua Tetikus dan Peranti Sentuh?

Bagaimanakah Saya Boleh Membuat Togol Menu Turun Berfungsi pada Kedua-dua Tetikus dan Peranti Sentuh?

Linda Hamilton
Lepaskan: 2024-12-06 20:07:15
asal
423 orang telah melayarinya

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

Dokumen .klik Fungsi untuk Peranti Sentuh

Untuk menogol menu lungsur turun pada peranti sentuh, kita boleh menggunakan .on( ) pengendali acara untuk mendengar acara klik dan sentuh pada dokumen. Kod yang dikemas kini:

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

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

});
Salin selepas log masuk

Inilah sebabnya ini berfungsi:

Acara Klik:
Acara klik biasanya dicetuskan oleh klik tetikus, tetapi penyemak imbas moden juga melancarkan acara ini untuk satu ketikan pada skrin sentuh.

sentuh mula Acara:
Acara permulaan sentuh dicetuskan sebaik sahaja elemen disentuh, memastikan fungsi itu dicetuskan walaupun pada peranti yang mungkin tidak menyokong acara klik standard untuk input sentuhan.

Dengan menggunakan pengendali acara .on() dengan kedua-dua acara 'klik' dan 'mula sentuh', kami memastikan fungsi tersebut akan dilaksanakan tanpa mengira kaedah input (sama ada klik tetikus atau sentuh). Ini membolehkan pengguna menogol menu lungsur turun secara konsisten merentas kedua-dua peranti desktop dan sentuh.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Togol Menu Turun Berfungsi pada Kedua-dua Tetikus dan Peranti Sentuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan