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个函数来正确使用它？

根据屏幕大小禁用javascript

1 个答案: