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 example

根据屏幕大小，做出响应式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');
      });
   }
}

响应式jQuery不起作用：点击低于768px宽度并悬停在768px以上

1 个答案: