Conflit jQuery toggleClass

Pour une nouvelle conception Web, j’ai deux menus de curseur de largeur 50% en largeur, et je veux append / supprimer / basculer la classe ‘open’ avec jQuery. Au clic de l’un des .menul, le #left aurait dû append la classe .open, à moins que #right: survolait et inversement. La première fois que vous cliquez dessus, cela fonctionne, mais la deuxième fois que vous cliquez dessus, il semble que toggleClass soit bloqué / non mis à jour … Est-ce que quelqu’un sait comment résoudre ce problème?

Voici mon HTML:

   Savado Sounds
  Performing artist
 Media Composer
 Band Producer
 
 
  
   
 
   Savado Designs
  Content Management
 Design Portfolio
 Search Engines

Et voici mon jQuery:

 $('.menul').click(function(){ $('#left').addClass('open'); $('#right').removeClass('open'); $('#right').hover(function(){$('#left').toggleClass('open')}); }); $('.menur').click(function(){ $('#right').addClass('open'); $('#left').removeClass('open'); $('#left').hover(function(){$('#right').toggleClass('open')}); });

Et voici le violon: http://jsfiddle.net/ytexqtyg/2/

Toute aide serait très appréciée!

J’ai jeté un autre coup d’œil et vous devrez append une autre classe ou un autre atsortingbut de données pour faire la différence entre un menu actif et fermé et un menu actif et ouvert, sinon cela ne fonctionnera pas.

Le “drapeau” actif est destiné à garantir que vous ne basculez que la classe .open dans un menu actif.

En outre, vous devez également maintenir la liaison dissociée de l’événement de survol, sinon vous lierez de nouveau constamment le survol, de sorte que l’élément soit lié à plusieurs événements de survol qui s’exécutent et se contredisent mutuellement.

Notez que lorsque vous annulez la liaison avec hover , l’utilisation de jQuery off('hover')/unbind('hover') ne fonctionne pas selector.hover(...)

Le nouveau code JavaScript est le suivant:

 $('.menul').click(function () { $('#left').addClass('active'); $('#left').addClass('open'); $('#right').removeClass('active'); $('#right').off('mouseenter mouseleave').hover(function(){ if($('#left').hasClass('active')){ $('#left').toggleClass('open'); } }); }); $('.menur').click(function () { $('#right').addClass('active'); $('#right').addClass('open'); $('#left').removeClass('active'); $('#left').off('mouseenter mouseleave').hover(function(){ if($('#right').hasClass('active')){ $('#right').toggleClass('open'); } }); });

DEMO – Utilisation d’un indicateur distinct pour un menu actif