根据屏幕尺寸禁用JavaScript

Question

我有此代码，当我的屏幕尺寸变为766px时，我想禁用此代码。

有人可以帮我吗？

$("#menu-main-menu #menu-item-28").hover(function() {
    $('#menu-main-menu .sub-menu').css("display", "block");
    $("#menu-main-menu .sub-menu").hover(
        function() {
            $('#menu-main-menu .sub-menu').css("display", "block");
        },
        function() {
            $('#menu-main-menu .sub-menu').css("display", "none");
        });
    },
    function() {
        $('#menu-main-menu .sub-menu').css("display", "none");
    }
);

我找到了这个，我想这个可以帮助启用脚本，但是我不知道如何应用。

$(window).resize(function() {
    if ($(this).width() > 766) {
        //script here
    }
});

Answer 1

您可以使用CSS隐藏元素，然后更改屏幕尺寸 ，请参见mediaquery 。 像这样

@media only screen and (max-width: 766px) {
    #menu-main-menu #menu-item-28,
    #menu-main-menu .sub-menu {
        display: none;
    }
}

或者您可以使用找到的脚本

function onHover() {
    function() {
        $( '#menu-main-menu .sub-menu' ).css("display", "block");
        $( "#menu-main-menu .sub-menu" ).hover(
        function() {
            $( '#menu-main-menu .sub-menu' ).css("display", "block");  
            },
            function() {
            $( '#menu-main-menu .sub-menu' ).css("display", "none");
            });
    },
    function() {
        $( '#menu-main-menu .sub-menu' ).css("display", "none");
    }
}

var isLargeScreen = $(this).width() > 766;
$(window).resize(function() {

    var largeScreen = $(this).width() > 766;
    if (!isLargeScreen && largeScreen) {
        $( "#menu-main-menu #menu-item-28" ).on('hover', onHover);
    } else if (isLargeScreen && !largeScreen) {
        $( "#menu-main-menu #menu-item-28" ).off('hover', onHover);
    }
    isLargeScreen = largeScreen;
});

这不是一个完整的工作示例，但是您可以看到逻辑并进行修改，以将$( "#menu-main-menu .sub-menu" ).hover(我不确定您是否在正确使用）通过2个功能吗？