Comment désactiver la fonction déroulante de survol jQuery lors du redimensionnement de l'écran

Question

Je souhaite créer un site Web réactif et convivial, mais je ne suis pas familier avec jQuery. J'espère que vous pourrez m'aider plus loin. Lorsque la taille de l'écran diminue (max 767px), je veux désactiver ma fonction de survol de dropdown de jQuery. La seule chose que je veux, c'est la fonction click au lieu de hover.

$(function(){ 
    $(".dropdown").hover(function() { 
     $(".dropdown-menu", this).stop(true, true).fadeIn("fast"); 
     $(this).toggleClass("open");   
    }, function() { 
     $(".dropdown-menu", this).stop(true, true).fadeOut("fast"); 
     $(this).toggleClass('open');   
    }); 
}); 

Answer 1

La réponse est simple à utiliser $ (fenêtre) jQuery .resize événement pour vérifier la $ (fenêtre) .width. Cependant, il peut y avoir une complexité supplémentaire en fonction de la manière dont les différents navigateurs traitent les barres de défilement (voir https://www.fourfront.us/blog/jquery-window-width-and-media-queries). En outre, avec la liaison et la dissociation, l'événement Hover ne fonctionne pas. L'événement hover est vraiment une implémentation directe des événements mouseenter et mouseleave. Ce qui suit devrait fonctionner pour vous, cependant. Faites-moi savoir s'il y a des problèmes car je ne l'ai pas testé.

$(window).resize(function(){  
     if ($(window).width() <= 767) { 
      $(".dropdown").unbind("mouseenter mouseleave"); 
     } 
     else { 
      $(".dropdown").bind({ 
       mouseenter: function() { 
        $(".dropdown-menu", this).stop(true, true).fadeIn("fast"); 
        $(this).toggleClass("open"); 
       }, 
       mouseleave: function() { 
        $(".dropdown-menu", this).stop(true, true).fadeOut("fast"); 
        $(this).toggleClass('open'); 
       } 
      }); 
     } 
    }); 

Answer 2

La plus rapide et la plus simple est d'utiliser jQuery redimensionne événement et vérifier la taille de la fenêtre en cours et décider si nous devons associer ou dissocier nos événements. Voici un violon montrant une façon de le faire. Gardez à l'esprit qu'il y a beaucoup de choses à gérer, comme vérifier si la taille a changé, correctement déconnecter les événements et s'assurer que nous ne continuons pas à relier le même événement. N'hésitez pas à poser des questions.

Comme pour le titre direct de votre question. Vous ne désactivez pas vraiment les événements mais les dissociez et pour désactiver le vol plané vous utilisez: off('mouseenter mouseleave'). Par jquery docs: https://api.jquery.com/hover/

Pour UNBIND l'exemple ci-dessus l'utilisation:

$ 1 ("td") .off ("mouseenter mouseleave");

Fiddle: https://jsfiddle.net/f81tsgtn/4/

JS:

// Initialize 
var $window = $(window); 
var $dropdown = $(".dropdown"); 
var $dropdownMenu = $(".dropdown-menu", $dropdown); 
var currentSize = $window.width(); 
var currentEvent = ''; 

// Attach current event on load 
(currentSize >= 767) ? bindOne('hover') : bindOne('click'); 

// Atach window resize event 
$window.resize(function() { 
    // get windows new size 
    var newSize = $window.width(); 

    // Exit if size is same 
    if (currentSize == newSize) { 
     return; 
    } 

    // Check if its greater/smaller and which current event is attached so we dont attach multiple events 
    if (newSize >= 767 && currentEvent != 'hover') { 
     bindOne('hover'); 
    } else if (newSize < 767 && currentEvent != 'click') { 
     bindOne('click'); 
    } 

    // Update new size 
    currentSize = newSize; 
}); 

// Handles binding/unbinding of events 
function bindOne (eventType) { 
    if (eventType == 'hover') { 
     // Update currentEvent 
     currentEvent = eventType; 

     // Make sure all previous events are removed and attach hover 
     $dropdown.off('click').off('mouseenter mouseleave').hover(
      function() { 
       $dropdownMenu.stop(true, true).fadeIn("fast"); 
      }, 
      function() { 
       $dropdownMenu.stop(true, true).fadeOut("fast"); 
      } 
     ); 
    } 
    else if (eventType == 'click') { 
     // Update currentEvent 
     currentEvent = eventType; 

     // Make sure all previous events are removed and attach hover 
     $dropdown.off('mouseenter mouseleave').off('click').on('click', 
      function() { 
       $dropdownMenu.stop(true, true).fadeToggle("fast"); 
      } 
     ); 
    } 
} 

HTML:

<div class="dropdown"> 
    hello 
    <div class="dropdown-menu"> 
     hello again 
    </div> 
</div> 

CSS:

.dropdown-menu { 
    display: none; 
}