在屏幕调整大小时删除 jQuery 函数答案

【问题标题】：Remove jQuery function on screen resize在屏幕调整大小时删除 jQuery 函数
【发布时间】：2018-01-05 16:38:04
【问题描述】：

我创建了一个 jQuery 函数来显示一个 div，它应该在屏幕大小超过 1000 像素时才可以工作。

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

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

目前脚本仅在我打开网页并且屏幕已经小于 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();
});

【问题讨论】：

标签： jquery css resize screen-size

【解决方案1】：

你可以使用 CSS @media

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

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

【讨论】：

如果您真的希望鼠标事件...请解释一下。 ;)
没想过用CSS，简单快速。谢谢！刚刚将它添加到我的 CSS 文件中：@media screen and (max-width: 999px) { #mega-menu-projects { display: none !important; }

【解决方案2】：

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

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

【讨论】：

但是有一些奇怪的东西我不明白。只有将鼠标悬停在元素上时才会显示元素，是吗？因为如果是这样，它就行不通了。您不能在隐藏元素上触发悬停事件。

【解决方案3】：

使用 jQuery，您可以使用 .off 删除事件侦听器

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

类似（未经测试）

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

也就是说，如果您只想根据屏幕尺寸在悬停时添加/删除可视打开/关闭功能。使用 media queries 在 CSS 中做这件事会更好。

您可以使用它根据屏幕大小添加/删除悬停状态

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

【讨论】：