如果聲明取決於屏幕寬度

Question

我創建了一個JS if語句，該語句應該檢測屏幕寬度並根據屏幕寬度更改css屬性。 如果屏幕寬於700像素，則應擴展#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');
            });
    }
});

}）;

Answer 1

使窗口的大小調整事件參與函數，請嘗試此

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

每次調整頁面大小時，都會調用該函數