Javascript 响应性jQuery不'；t工作：在768px宽度下方单击，并将鼠标悬停在768px上方

我需要一个菜单，当我在768px窗口宽度以上的li上悬停时打开，当我在768px窗口宽度以下单击相同的li时打开。我一直有问题，点击或悬停会在两个屏幕大小（0-768px和769及以上）之间进行

功能颜色变化测试（宽度）{
如果（widthFYI），最好在代码中将相同的事件监听器附加到相同的元素上一次。在您的情况下，每次窗口调整大小时，新的事件监听器（悬停或单击）都会反复附加

使用
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');
      });
   }
}

功能颜色变化测试（宽度）{
变量$li=$（'li'）；
$li.unbind（）；
如果（你的问题的宽度…）jQuery总是使用选择器。你可以在选择器上处理事件。你总是知道调用事件的内容。我想我不明白你在说什么。这似乎在MyJSFIDLE中起作用！非常感谢，我将把它集成到我的完整站点中，看看它是如何运行的！
function colorChangeTest(width){
   var $li= $('li');
   $li.unbind();
   if (width <= 767) {
      $li.click(function() {
         $(this).toggleClass('colorChange');
      });
   } else {
      $li.hover(function() {
         $(this).toggleClass('colorChange');
      });
   }
}