响应式 jQuery 不起作用:单击宽度低于 768px 并将鼠标悬停在 768px 上方

Responsive jQuery doesn't work: Click below 768px width and hover above 768px

本文关键字：768px 鼠标 悬停 上方 不起作用 jQuery 单击 响应      更新时间：2023-09-26

当我将鼠标悬停在 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的最佳方法是什么，它可以根据屏幕大小单击或悬停，并在页面加载和窗口大小调整时确定？

仅供参考，最好在代码中将相同的事件侦听器附加到相同的元素。在您的情况下，每次调整窗口大小时，都会一次又一次地附加新的事件侦听器（悬停或单击）。

用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');
      });
   }
}
相关文章：