Bagaimanakah Saya Boleh Menutup Dropdown pada Kedua-dua Peranti Sentuh dan Desktop?

Sentuh Sokongan Peranti untuk Dokumen .klik Fungsi

Apabila bekerja dengan tapak web responsif, adalah penting untuk memastikan semua fungsi kekal utuh pada kedua-dua desktop dan peranti sentuh. Walau bagaimanapun, peristiwa tertentu, seperti fungsi document .click, mungkin tidak berfungsi seperti yang dijangkakan pada skrin sentuh.

Masalah:

Titik turun sub-navigasi ditogol menggunakan jQuery .klik acara pada item senarai induk. Walau bagaimanapun, mengklik di mana-mana pada skrin untuk menutup menu lungsur tidak berfungsi pada peranti sentuh.

Penyelesaian:

Pelayar moden kini menyokong acara klik untuk interaksi ketik, jadi menggunakan dokumen .klik sudah memadai. Walau bagaimanapun, penyemak imbas yang lebih lama mungkin memerlukan acara sentuhan tambahan:

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

Penjelasan:

Acara permulaan sentuh dicetuskan serta-merta apabila sentuhan dikesan, memberikan sandaran untuk peranti yang tidak menyokong acara klik untuk ketikan. Acara klik kekal untuk mengendalikan interaksi klik dan ketik pada penyemak imbas moden.

Dengan menggabungkan kedua-dua acara, anda memastikan dropdown boleh ditutup dengan mengklik atau mengetik di mana-mana pada skrin, tanpa mengira peranti yang digunakan .

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menutup Dropdown pada Kedua-dua Peranti Sentuh dan Desktop?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!