響應式jQuery不起作用：在768px寬度以下單擊，並將鼠標懸停在768px以上

Question

當窗口寬度超過768px時，當我將鼠標懸停在li上時，我需要打開一個菜單；當窗口寬度低於768px時，單擊同一li時，我需要打開一個菜單。 在兩個屏幕尺寸（0-768px和769及以上）之間單擊或懸停時，我一直遇到問題。

function colorChangeTest(width){
   if (width <= 767) {
      $('li').click(function() {
         $(this).toggleClass('colorChange');
      });
   } else {
      $('li').hover(function() {
         $(this).toggleClass('colorChange');
      });
   }
}

$(function () {
   var onLoadWidth = $(window).width();
   colorChangeTest(onLoadWidth);
   $(window).resize(function () {
      var resizeWidth = $(window).width();
      colorChangeTest(resizeWidth);
   });
})

jsfiddle示例

做響應式jQuery的最佳方法是什么（取決於屏幕大小），告訴它可以單擊或懸停，並在頁面加載和窗口調整大小時確定？

Answer 1

僅供參考，最好將相同的事件偵聽器在代碼中一次附加到相同的元素。 在您的情況下，每次窗口調整大小時，都會反復附加新的事件偵聽器（懸停或單擊）。

使用unbind來避免它。 例如：

function colorChangeTest(width){
   var $li= $('li');
   $li.unbind();
   if (width <= 767) {
      $li.click(function() {
         $(this).toggleClass('colorChange');
      });
   } else {
      $li.hover(function() {
         $(this).toggleClass('colorChange');
      });
   }
}