Maison > interface Web > tutoriel CSS > Comment puis-je faire fonctionner une bascule de menu déroulant sur les appareils avec souris et tactiles ?

Comment puis-je faire fonctionner une bascule de menu déroulant sur les appareils avec souris et tactiles ?

Linda Hamilton
Libérer: 2024-12-06 20:07:15
original
423 Les gens l'ont consulté

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

Fonction Document .click pour les appareils tactiles

Afin de basculer un menu déroulant sur un appareil tactile, nous pouvons utiliser le .on( ) gestionnaire d'événements pour écouter les événements de clic et de toucher sur le document. Le code mis à jour :

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

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

});
Copier après la connexion

Voici pourquoi cela fonctionne :

Événement de clic :
L'événement de clic est généralement déclenché par un clic de souris, mais les navigateurs modernes déclenchez également cet événement en appuyant simplement sur un écran tactile.

touchstart Événement :
L'événement touchstart est déclenché dès qu'un élément est touché, garantissant que la fonction est déclenchée même sur les appareils qui peuvent ne pas prendre en charge l'événement de clic standard pour la saisie tactile.

En utilisant le gestionnaire d'événements .on() avec les événements 'click' et 'touchstart', nous garantissons que la fonction sera exécutée quelle que soit la méthode de saisie (clic de souris ou toucher). Cela permet aux utilisateurs de basculer le menu déroulant de manière cohérente sur les appareils de bureau et tactiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal