Question

我尝试根据用户屏幕大小执行功能。我设法使用以下代码执行此操作：

var width = $(window).width();

    if (width > 1000) {
        slideshow();
        tablet();
        if (width > 1600) {
            audio();
        }
    }
    else {
        phone();
        $('.menu').localScroll();   
    }

当用户在网站内部时更改屏幕尺寸（如调整大小或更改方向模式）时，之前执行的功能仍然生效，这与他试图执行的最新功能产生冲突

我尝试将以下代码添加到上面列出的代码中：

    $(window).resize(function() {
    $('.logo').unbind();
    $('.menu-item').unbind();
    $('.menuList').unbind();
    $('.icon-menu').unbind();
    $('.menuListItem').unbind();
    $('.menu').unbind();
    $('.info').unbind();

    if (width > 1000) {
        slideshow();
        tablet();
        if (width > 1600) {
            audio();
        }
    }
    else {
        phone();
        $('.menu').localScroll();   
    }
});

此代码.unbind（）当用户调整浏览器大小时，前一个函数影响的每个元素，但它仍然加载以前的功能（手机/平板电脑）。

我正在寻找一种在调整屏幕尺寸时删除不必要的功能的方法。

可以在this website

查看实时示例

Answer 1

试试这个：

function res(){
        var width = $(window).width();
        $('.logo').unbind();
        $('.menu-item').unbind();
        $('.menuList').unbind();
        $('.icon-menu').unbind();
        $('.menuListItem').unbind();
        $('.menu').unbind();
        $('.info').unbind();
    }
$(window).ready(res).resize(res);

根据屏幕尺寸更改功能

1 个答案: