Comment puis-je fermer de manière fiable une liste déroulante sur les appareils tactiles et de bureau ?

Prise en charge des appareils tactiles pour la fonction Document .click

Lorsque vous travaillez avec des sites Web réactifs, il est crucial de garantir que toutes les fonctionnalités restent intactes sur les deux ordinateurs de bureau. et les appareils tactiles. Cependant, certains événements, tels que la fonction document .click, peuvent ne pas fonctionner comme prévu sur les écrans tactiles.

Problème :

Une liste déroulante de sous-navigation est basculée à l'aide d'un Événement jQuery .click sur l'élément de la liste parent. Cependant, cliquer n'importe où sur l'écran pour fermer la liste déroulante ne fonctionne pas sur les appareils tactiles.

Solution :

Les navigateurs modernes prennent désormais en charge les événements de clic pour les interactions tactiles, donc en utilisant le document .click devrait suffire. Cependant, les anciens navigateurs peuvent nécessiter un événement tactile supplémentaire :

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

Explication :

L'événement touchstart se déclenche immédiatement lorsqu'un contact est détecté, fournissant ainsi une solution de secours aux appareils. qui ne prennent pas en charge les événements de clic pour les taps. L'événement de clic reste en place pour gérer les interactions par clic et par pression sur les navigateurs modernes.

En combinant les deux événements, vous garantissez que la liste déroulante peut être fermée en cliquant ou en appuyant n'importe où sur l'écran, quel que soit l'appareil utilisé. .

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!