Hover événement action pas décrocher sur le redimensionnement de la fenêtre du navigateur

Question

J'ai un div qui affiche un menu sur hover ou onclick, en fonction de la largeur du navigateur.

onhover ou onclick à une résolution plus élevée, le menu doit passer au-dessus du contenu existant. Si vous cliquez sur une petite résolution, le menu ne devrait pas planer mais plutôt glisser vers le bas. Tout fonctionne comme prévu au moment du chargement initial dans les largeurs d'écran spécifiques

Le problème se produit lorsque l'écran du navigateur est redimensionné manuellement. Si c'est à une plus grande résolution et le bouton de menu est survolé, en affichant le menu - tout va bien. Mais si l'écran est ensuite manuellement redimensionné à une largeur plus petite, au lieu du menu glissant onclick, il survole le contenu existant sur hover (bien que fonctionne correctement comme un curseur onclick).

Si je puis actualiser la fenêtre, cela fonctionne comme un curseur.

Je suppose que le navigateur ne décroche pas l'événement hover lorsque l'écran est redimensionné, même si je vérifie la largeur sur hover ainsi que les actions onclick et determing en fonction de cela. Qu'est-ce que je fais mal?

voici mon code: - #MainMenu est le bouton étant cliqué, .nav-conteneur est le nav div

 $('#MainMenu').on('click mouseover',function(event){ 

        var wi = $(window).width(); 

        //If between 768 and 979 pixels, menu should be overlay/onhover/onclick 

        if(wi >= 768 && wi <=979) { 

         /* Show menu on hover */ 

         $("#MainMenu, .nav-container").hover(function() { 
          $('.nav-container').show(); 
         }); 

         /* Hide menu on mouseout */ 

         $('.header-content').mouseleave(function() { 
          $('.nav-container').hide(); 
         }); 

         /* Nav should also open/close onclick */ 
         $('.nav-container').toggle(); 

        } 

        //Otherwise, menu should slide down but only onclick 

        else { 
         if(event.type=="click") { 
          $('.nav-container').slideToggle(); 
         } 

      }); 

Answer 1

Que diriez-vous quelque chose comme ceci:

$('#MainMenu').on('click mouseover',function(event){ 
     /* Show menu on hover */ 
     $("#MainMenu, .nav-container").hover(function() { 

      var wi = $(window).width(); 

      //If between 768 and 979 pixels, menu should be overlay/onhover/onclick 
      if(wi >= 768 && wi <=979) { 
       $('.nav-container').show(); 
      } 
      else{ //Otherwise, menu should slide down but only onclick 
       if(event.type=="click") { 
        $('.nav-container').slideToggle(); 
       } 
      } 
     }); 
    } 
}); 

Fondamentalement, vous êtes vérifier la largeur avant de déclencher le spectacle et se cacher. Remarque: votre événement hover lie tous les click mouseover, ce n'est probablement pas ce que vous voulez.