Как запустить функцию js с шириной экрана

Question

У меня есть левое меню, которое можно сдвинуть с помощью кнопки, но я хочу скрыть его автоматически, когда ширина экрана ниже определенного размера, поэтому нажмите кнопку верни это. Что я делаю неправильно?

$(function() { 

if (screen.width > 1200) { 

    $(".ncLeftMenuButton").click(function() { 
     $(".ncLeftMenuClosed").switchClass("ncLeftMenuClosed", "ncLeftMenu", 1000); 
     $(".ncLeftMenu").switchClass("ncLeftMenu", "ncLeftMenuClosed", 1000); 
     $(".ncMainBlockClosed").switchClass("ncMainBlockClosed", "ncMainBlock", 1000); 
     $(".ncMainBlock").switchClass("ncMainBlock", "ncMainBlockClosed", 1000); 
    }); 
} 

else { 
    $(".ncLeftMenuButton").load(function() { 
     $(".ncLeftMenu").switchClass("ncLeftMenu", "ncLeftMenuClosed", 1000); 
     $(".ncLeftMenuClosed").switchClass("ncLeftMenuClosed", "ncLeftMenu", 1000); 
     $(".ncMainBlock").switchClass("ncMainBlock", "ncMainBlockClosed", 1000); 
     $(".ncMainBlockClosed").switchClass("ncMainBlockClosed", "ncMainBlock", 1000); 
    }); 
} 

}); 

Answer 1

screen.width получит размер разрешения экрана пользователя. Я думаю, вы хотите получить размер окна браузера. Поскольку вы используете jQuery, вы можете использовать $ (window) .height() или даже $ (document) .height();

if ($(window).height() > 1200) { 

Если вы хотите, чтобы вызвать функцию, когда браузер изменяет размер, это хорошая идея, чтобы событие изменения размера:

$(window).resize(function() { 
    if ($(window).height() > 1200) { 
    // Your code 
    } 
}); 

PS: Вы также можете сделать то, что вы хотите, только с помощью CSS @media queries.

<style> 
    @media (max-width: 1200px) { 
    do some css things 
    } 
</style> 

Answer 2

Я смог решить свой вопрос. благодаря тому, кто помогал.

$(document).ready(function() { 
var $window = $(window); 

// Function to handle changes to style classes based on window width 
function checkWidth() { 
    if ($window.width() < 1300) { 
     $('.ncLeftMenu').removeClass('ncLeftMenu').addClass('ncLeftMenuClosed'); 
     $('.ncMainBlock').removeClass('ncMainBlock').addClass('ncMainBlockClosed'); 

       $(".ncLeftMenuButton").click(function() { 
        $(".ncLeftMenu").switchClass("ncLeftMenu", "ncLeftMenuClosed", 1000); 
        $(".ncLeftMenuClosed").switchClass("ncLeftMenuClosed", "ncLeftMenu", 1000); 
        $(".ncMainBlockClosed").switchClass("ncMainBlockClosed", "ncMainBlock", 1000); 
        $(".ncMainBlock").switchClass("ncMainBlock", "ncMainBlockClosed", 1000); 

       }); 
    }; 

    if ($window.width() >= 1300) { 
     $('.ncLeftMenuClosed').removeClass('ncLeftMenuClosed').addClass('ncLeftMenu'); 
     $('.ncMainBlockClosed').removeClass('ncMainBlockClosed').addClass('ncMainBlock'); 
    } 
} 

// Execute on load 
checkWidth(); 

// Bind event listener 
$(window).resize(checkWidth); 

});