如何在不刷新页面的情况下执行此if语句?

How can i do this if statement without refreshing the page?

本文关键字：执行 情况下 if 语句 刷新      更新时间：2023-09-26

我正在使用css媒体和JQuery构建一个响应式网站。

我创建了一个脚本来检查页面宽度:

if ($(window).width() < 1240) {
 $("#menu").toggle(); //hide menu
    $('#body-wrap').toggleClass('shifted'); //puts the body width to 100%
    $('#navbar').toggleClass('shifted'); //puts the navbar width to 100%
}

但是这段代码只在刷新页面时起作用。

我怎样才能自动完成呢?

谢谢。

放到resize事件中。

window.addEventListener('resize', function () {
  // Your code
});

你可能想要考虑使用CSS来代替，不过(看看媒体查询)

您必须将其添加到onresize事件中:https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

此事件将在每次调整窗口大小时调用，因此您可以响应这些更改。

但是我认为更好的选择是使用CSS媒体查询，像这样:

@media only screen 
and (max-device-width : 1240px) {
    #menu {
        display: none;
    }
}

示例和信息:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

相关文章：