Question

我已经创建了一个jQuery函数来显示一个div，它应该在屏幕大小超过1000px时起作用。

该功能正常工作但由于jQuery功能已加载，因此在调整屏幕大小时它不起作用。因此，当我调整屏幕大小时，该功能会一直停留在那里。

一旦我调整屏幕大小并且小于1000px，有没有办法删除此脚本？

目前，当我打开网页并且屏幕已经小于1000像素时，脚本正常工作，但是当我调整屏幕大小时，屏幕就没有了

这就是我现在所拥有的。

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()
}

也就是说，如果您尝试做的只是根据屏幕大小添加/删除悬停时的可视打开/关闭功能。您可以使用media queries在CSS中更好地完成此操作。

您可以根据屏幕尺寸添加/删除悬停状态

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

在屏幕上移除jQuery函数调整大小

3 个答案: