Javascript 如何使用屏幕宽度启动js函数

我有一个左边的菜单，我可以通过点击按钮滑出，但我想在屏幕宽度低于某个大小时自动隐藏它，这样点击按钮就会把它带回来。我做错了什么

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

});

---

screen.width将获得用户屏幕分辨率的大小。我想你想知道浏览器窗口的大小。因为您使用的是jQuery，所以可以使用$window.height甚至$document.height

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

如果要在调整浏览器大小时触发该函数，最好有一个调整大小事件：

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

PS：你也可以只使用css做你想做的事情

---

我能够解决我自己的问题。感谢所有帮助过我的人

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

})

它是窗口宽度，而不是屏幕宽度。

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