在特定屏幕宽度下禁用 jQuery 功能

Question

一段时间以来，我一直在编写一段 jQuery 代码，但我无法让它按我想要的方式工作。基本上，我希望在 768px 的屏幕宽度以下完全禁用此 jQuery 代码。

代码如下：

$(document).ready(function () {
    $(".resp-menu-btn").click(function () {

        if ($('.resp-menu-btn').is(':animated')) {
            return;
        }

        if ($('.site-nav').css('display') == 'none') {
            $().stop().slideToggle({ "display": "block"}, 600);
            $('.site-nav ').stop().slideToggle(600);
        }

        else {
            $().animate({"display": "none"}, 600);
            $('.site-nav').slideToggle(600);
        }

    });
});

我尝试了一些方法，例如：

if(window.innerWidth < 768px) return true;
else return false;

和

if ( $(window).width() > 768) { 
myCode 
}

但似乎没有任何效果。

你们能给我一些关于如何实现我正在寻找的结果的指示吗？非常感谢！

Answer 1

我不确定你为什么要这样做，但你可以在 768px 之后取消绑定按钮元素的点击事件。

$(window).scroll(onScroll);

function onScroll(){
    if($(window).scrollTop >= 768){
        $(".resp-menu-btn").off('click');
        $(window).off('scroll');
    }
};

如果你想给这个元素绑定其他功能，你可以重新绑定它到另一个点击事件的功能。

Answer 2

你试过没有“px”的语句吗？我的意思是你应该那样使用

 if(window.innerWidth() < 768) return true; else return false;

window.innerWidth 属性是只读的。

在特定屏幕宽度下禁用 jQuery 功能

Disable a jQuery function at a certain screen width

jquery

window

width