jQuery click arrête les événements de survol css

J’ai un menu déroulant css classique avec sélecteur de survol css basculant sur «display: block;

Afin de travailler avec les appareils tactiles, j’ai ajouté ce script:

$(document).ready(function () { $("div.menuHead").click(function () { //Toggle the menu but don't include it in the hide selector using .not() $(this).siblings("div.menu").toggle(); $("div.menuHead").not($(this)).siblings("div.menu").hide(); }); }); 

Le menu déroulant en survol continue de fonctionner sur les ordinateurs de bureau, tandis que le menu peut être cliqué sur un périphérique tactile. Cependant, si l’utilisateur du bureau clique avec la souris, cela fonctionne mais désactive complètement le survol sur tous les menus . Alors seulement en cliquant fonctionne.

Une idée pourquoi? J’ai essayé de désactiver complètement les propriétés du survol css et de tout gérer dans jQuery avec les événements mouseover et mouseout, mais lorsque vous cliquez sur iOs, il déclenche immédiatement un événement mouseover, puis un clic, qui ouvre et ferme rapidement le menu.

• les listes déroulantes de superfish doivent être mises en colonne quand il y a beaucoup d’enfants et pas de nœuds de «petits-enfants»
• Naviguer dans la cellule du tableau à l’aide de la touche fléchée et ignorer la cellule désactivée
• jQuery cacher en cliquant en dehors de div
• Ajouter une bordure inférieure et une couleur BG à l’aide de JQuery / CSS
• Comment obtenir une propriété de style CSS inline à partir d’un élément

Structure HTML:

 
 
Menu Title
 
 
 
Item1
 
Item2
 
Item3
 
 
  

Parmi d’autres choses que j’ai définies en CSS:

 div.vectorMenu div.menu { display: none; } div.vectorMenu:hover div.menu { display: block; } 

Merci,

Etienne

• Effectuer un panoramique d’une grande image à l’aide de la souris, en partant du centre
• Fermer le menu hors canvas en cliquant sur la fenêtre
• Comment append target = _blank à tous les liens PDF à l’intérieur de div en utilisant jquery?
• Organisez l’élément Bootstrap Carousel en respectant la largeur.
• Pourquoi mon code javascript ne traite-t-il pas de haut en bas?

 $("div.menuHead").not($(this)).siblings("div.menu").hide(); 

 $(document).ready(function () { $(".menuHead").on('click mouseenter mouseleave', '> li', function (evt) { var e = evt || window.event; switch (e.type || e.which) { case "click": if (!($(this).find('.menu').hasClass('stayOpen'))) { $('.stayOpen').removeClass('stayOpen').hide(); $(this).find('.menu').addClass('stayOpen'); } else { $(this).find('.menu').removeClass('stayOpen').hide(); } break; case "mouseenter": $(this).find('.menu').not('.stayOpen').addClass('open').show(); break; case "mouseleave": $(this).find('.menu').not('.stayOpen').removeClass('open').hide(); break; default: break; } }); }); 

 
 
Menu #1 
 
Menu #1 - Link #1
 
Menu #1 - Link #2
 
 
 
Menu #2 
 
Menu #2 - Link #1
 
Menu #2 - Link #2
 
 
  

 .title { width: 150px; display: inline-block; position: relative; } .menu { display: none; } .open, .stayOpen { position: absolute; top: 100%; display: block; width: 300px; } 

 div.vectorMenu:hover div.menu { display: block !important; }