Javascript Girl
  1. Javascript Girl
  3. JQuery clique sur css hover events
Intereting Posts
Masque pour putImageData avec toile HTML5? JQuery cliquez sur la bordure d'un div Menu Toggle Issue + Emission d'alignement d'image Quelle étape, démarrez-vous et passez-vous dans Firebug? Exécuter JQuery après la chargement de la page uniquement après avoir cliqué sur un lien spécifique Comment supprimer le premier et le dernier caractère d'une chaîne JavaScript: Différence entre les méthodes toString () et toLocaleString () de Date Meteor: comment publier le curseur qui dépend du curseur d'une autre collection Impossible d'afficher la valeur de promesse ES6 dans la vue AngularJS Importance du mot-clé de retour dans javascript Est-ce que le soutien grunt-contrib-less -source-map-map-inline? La directive angulaire choisie ne se met pas à jour Comment déboguez-vous les applications facebook connect et l'analyse xfbml à l'aide de javascript sdk? Comment obtenir l'état HTTP à partir de JavaScript Comment traiter avec brng.toRad n'est pas une fonction

JQuery clique sur css hover events

J'ai un menu déroulant css classique avec le sélecteur de déplacement css pour "afficher: bloc";

Pour travailler avec des 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(); }); });

La liste déroulante de survol continue à fonctionner sur les ordinateurs de bureau, tandis que le menu peut être cliqué sur un appareil tactile. Cependant, si l'utilisateur du bureau clique avec la souris, il fonctionne mais désactive complètement le survol de tous les menus . Ensuite, il suffit de cliquer sur les travaux.

Une idée pourquoi? J'ai essayé de désactiver complètement les propriétés de css et de gérer tout dans jQuery avec les événements mouseover et mouseout, mais lorsque vous cliquez sur iOs, vous déclenchez un mouseover puis un événement click immédiatement, ce qui ouvre le menu très rapidement, donc ça ne fonctionne pas.

Structure Html: 

 <div class="vectorMenu"> <div class="menuHead">Menu Title</div> <div class="menu"> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> </ul> </div> </div>

Entre autres choses, j'ai configuré CSS: 

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

Merci,

Etienne

Vous .hide parenthèse sur .hide . CA devrait etre: 

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

EDIT (basé sur le violon produit par OP) :

Démonstration de travail

Javascript: 

 $(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; } }); });

HTML: 

 <ul class="menuHead"> <li class="title">Menu #1 <ul class="menu"> <li>Menu #1 - Link #1</li> <li>Menu #1 - Link #2</li> </ul> </li> <li class="title">Menu #2 <ul class="menu"> <li>Menu #2 - Link #1</li> <li>Menu #2 - Link #2</li> </ul> </li> </ul>

CSS: 

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

Vous pouvez résoudre ce problème avec un CSS pur en ajoutant !important pour :hover CSS: 

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

JS Fiddle Demo