Question

我有以下代码：

var hoverList = function(){
  var width = $(window).width();
  console.log(width);
  if(width > 992) {
    $( ".dropdown" ).mouseover(function() {
      $(this).addClass('open');
    });

    $( ".dropdown" ).mouseleave(function() {
      $(this).removeClass('open');
    });
  } 
}
//call function on load and page resize
$(window).on('load', hoverList);
$(window).on('resize', hoverList);

此代码仅在窗口宽度小于992像素时才会向下拉类添加open类，因为我希望用户将菜单悬停在桌面上，但要在移动设备上点击移动版的导航。这个孩子的作品，如果我刷新大小小于992的页面并悬停一个li元素，导航不会切换，那么如果我调整窗口大小大于992px并悬停一个li元素，导航会切换，但是然后，如果我回到不到992并且徘徊在li，这次导航切换，我不知道可能导致这种行为的原因，我在SO上看到了一些与此类似的问题，但他们没有帮助。

感谢您的帮助，谢谢。

这些是我所提出的但没有帮助的问题

if condition always work inside $(window).resize function

Problem with function within $(window).resize - using jQuery

Answer 1

尝试编写其他条件。发生的是if条件仅在宽度大于992时才起作用。

Answer 2

我认为你可能会这样做更好：

$( ".dropdown" ).mouseover(function() {
    if($(window).width() > 992) {
      $(this).addClass('open');
    }
});

$( ".dropdown" ).mouseleave(function() {
    if($(window).width() > 992) {
      $(this).removeClass('open');
    }
});

为了完整起见，您的代码没有按预期方式运行，因为您从未删除过事件侦听器。因此，当您使窗口足够大以添加事件侦听器然后小到足以不想要它时，您必须将其删除。以下是使用nampespaced事件的示例，因此在删除事件时，我不会抛弃所有事件（其他代码可能仍需要侦听器）

var hoverList = function(){
  var width = $(window).width();
  console.log(width);
  if(width > 992) {
    $( ".dropdown" ).on("mouseover.autoopen",function() {
      $(this).addClass('open');
    });

    $( ".dropdown" ).on("mouseleave.autoopen",function() {
      $(this).removeClass('open');
    });
  }else{
    $(".dropdown").off("mouseleave.autoopen").off("mouseover.autoopen);
  }
}
//call function on load and page resize
$(window).on('load', hoverList);
$(window).on('resize', hoverList);

如果调用函数内部的条件调整大小不能正常工作

2 个答案: