当窗口大小为时禁用jQuery脚本

我试图在窗口大小小于700px时禁用jQuery脚本。 因此，当窗口大小小于700px时，此脚本不应工作。我无法让它工作。 加载页面时，脚本不起作用，但当我调整浏览器窗口的大小时，无论窗口大小如何，脚本都会起作用

这是我目前的代码：

jQuery(document).ready(function () {

    jQuery(window).resize(function () {
        if (jQuery(window).width() < 700) {

            jQuery("#block-menu-block-4 li, #block-menu-block-5 li").hover(

            function () {
                jQuery(this).addClass('hover');
                jQuery(this).children('.listContainer1, .listContainer2, .listContainer3, .listContainer4, .listContainer5, .listContainer6, .listContainer7').stop(true, true).show();
            },

            function () {
                jQuery(this).removeClass('hover');
                jQuery(this).children('.listContainer1, .listContainer2, .listContainer3, .listContainer4, .listContainer5, .listContainer6, .listContainer7').stop(true, true).slideUp(100);
            });

        }
    });

});

jQuery（文档）.ready（函数（）{
jQuery（窗口）.调整大小（函数（）{
if（jQuery（window）.width（）<700）{
jQuery（#block-menu-block-4li，#block-menu-block-5li）。悬停(
函数（）{
jQuery（this.addClass（'hover'）；
jQuery（this）.children（'.listContainer1、.listContainer2、.listContainer3、.listContainer4、.listContainer5、.listContainer6、.listContainer7'）.stop（true，true）.show（）；
},
函数（）{
jQuery（this.removeClass（'hover'）；
jQuery（this）.children（'.listContainer1、.listContainer2、.listContainer3、.listContainer4、.listContainer5、.listContainer6、.listContainer7'）.stop（true，true）.slideUp（100）；
});
}
});
});

您在事件中注册事件时犯了一个基本（严重）错误。当您调整大小时，当前将连接100/1000个事件处理程序，并且永远不会删除旧的事件处理程序，因此您的代码当然会继续执行

相反，您需要注册一次

hover

，并测试

hover

处理程序中的大小

一种替代方法是使用“on

和

off”来打开和关闭处理程序

---

另一种方法是根据大小向容器/主体添加一个类，并使用仅与特定大小/类匹配的委托事件处理程序。

警告：您正在

resize

事件中注册一个

悬停事件，因此在几次移动鼠标后，将得到1000个处理程序。关闭主题，但您最好只使用CSS（包括用于转换），而不是尝试通过JavaScript实现这一点。然后，您可以针对不同的视口大小以获得不同的效果。“当窗口大小小于700px时，我正在尝试禁用jQuery脚本…”此处可能有误，但当窗口第一次小于700像素时，您的脚本似乎会附加。这似乎与您的要求相反？…如果您提供JSFIDLE，我可以让它为您工作。