删除 jQuery 屏幕调整功能

Question

我创建了一个 jQuery 函数来显示一个 div，它应该只在屏幕尺寸超过 1000 像素时起作用。

该功能可以正常使用，但是当我调整屏幕大小时它不起作用，因为jQuery功能已经加载。所以当我调整屏幕大小时，该功能一直停留在那里。

有没有办法在我调整屏幕大小并且它小于 1000 像素后删除此脚本？

目前脚本在我打开网页并且屏幕已经小于 1000px 时有效，但在我调整屏幕大小时却没有

这就是我现在拥有的。

jQuery(document).ready(function() {
    jQuery(window).resize(function() {
        if(jQuery(window).width() >= 1000) {

          jQuery("#mega-menu-projects").mouseover(
              function(){
                  jQuery("#mega-menu-projects").show();
              }
          );

          jQuery("#mega-menu-projects").mouseout(
              function(){
                  jQuery("#mega-menu-projects").hide();
              }
          );

        }
    }).resize();
});

Answer 1

你应该改变你的逻辑。您可以将事件侦听器留在那里，但在检查屏幕尺寸是否不是您想要的尺寸后取消它：

jQuery("#mega-menu-projects").mouseover(function(){
    if (jQuery(window).width() < 1000) return;
    jQuery("#mega-menu-projects").show();
});

jQuery("#mega-menu-projects").mouseout(function () {
    if (jQuery(window).width() < 1000) return;
    jQuery("#mega-menu-projects").hide();
});

Answer 2

您可以使用 CSS @media

#mega-menu-projects{
  display:none;
}

@media screen and (min-width: 1000px) {
  #mega-menu-projects{
    display:block;
  }
}

Answer 3

使用 jQuery，您可以使用 .off

删除事件侦听器

如果屏幕比您需要的小，添加一个删除 mouseover 和 mouseout 事件的 else 子句就足够简单了。

类似（未测试）

else {
    jQuery("#mega-menu-projects").off()
}

也就是说，如果您想要做的只是 add/remove 视觉 open/close 基于屏幕尺寸的悬停功能。使用 media queries.

在 CSS 中你会玩得更开心

您可以使用它 add/remove 基于屏幕尺寸的悬停状态

@media (max-width: 1000px) {
    #mega-menu-projects:hover{
        ...
    }
}

删除 jQuery 屏幕调整功能

Remove jQuery function on screen resize

css

jquery

resize

screen-size