如果Statment取决于屏幕宽度

If Statment depending on screen width

本文关键字：屏幕 取决于 Statment 如果      更新时间：2023-09-26

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

总而言之，这个功能是有效的，但这只是我第一次调整窗口的大小。我不确定错误是什么。。。

谢谢你的帮助；）

$(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');
            });
    }
});

})；

将窗口的调整大小事件转换为一个函数，请尝试此

$(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');
        });
    }
}

每次调整页面大小时，该函数都将被称为

相关文章：