Question

我创建了一个JS if-statment，它应该检测屏幕宽度并根据屏幕宽度更改css属性。如果屏幕宽度超过700px，则应扩展#header_menu。如果分辨率低于700，则应扩展#menu（通过单击触发器）。

总而言之，该功能正在运行，但只是第一次调整窗口大小。我不确定错误是什么......

感谢您的帮助;）

$(document).ready(function(){
$(window).on('load resize', function checkPosition(){
        if (window.matchMedia('(max-width: 700px)').matches) {
            $("#menu_trigger").click(function(){
                $("#menu").css('width', '90%');
                $("#closer, #header").css('margin-left', '90%');
                $("#closer, #header").css('margin-right', '-90%');
            });
        } else {
            $("#menu_trigger").click(function(){
                $("#header_menu").css('width', 'auto');
            });
    }
});

}）;

Answer 1

将窗口的resize事件与函数联系起来，试试这个

$(document).load($(window).bind("resize", checkPosition));

function checkPosition(){
    if (window.matchMedia('(max-width: 700px)').matches) {
        $("#menu_trigger").click(function(){
            $("#menu").css('width', '90%');
            $("#closer, #header").css('margin-left', '90%');
            $("#closer, #header").css('margin-right', '-90%');
        });
    } else {
        $("#menu_trigger").click(function(){
            $("#header_menu").css('width', 'auto');
        });
    }
}

每次调整页面大小时，都会调用该函数

如果声明取决于屏幕宽度

1 个答案: