Javascript或JQuery需要重新加载页面,为什么?

因为后者是JavaScript。目前,这是一个在解析脚本标记时只启动一次的例程。您可以将其包装在函数中并多次激发它。例如,在窗口调整大小事件上。前者是CSS,浏览器根据CSS规则不断更新页面。

window.addEventListener("resize", function(){
     if ($(window).width() > 980) {
         do something
     };
}, false);

或在jQuery中:

$(window).on("resize", function(){
     if ($(window).width() > 980) {
         do something
     };
});

现在,每次调整窗口大小时都会触发此命令。

这是因为jQuery/Javascript是在加载时完成的,而不是在调整窗口大小时完成的。理论上,CSS也是在加载时完成的,只知道何时显示什么。

如果要在调整窗口大小时运行JS/jQuery,则必须添加如下内容:

window.onresize = resize;

function resize()
{
  if ($(window).width() > 980) {
     //do something
  };
}

上述代码将在每次调整窗口大小时运行,因此每次运行时都会检查窗口是否大于980。

Read more about .onresize

当 resize 事件已激发

  $( window ).resize(function() {
     if ($(window).width() > 980) {
       ... 
        .....
        ....
    }
 });

这会奏效的

参考- resize() jquery中的函数

您必须触发一个事件,使javascript在不加载页面的情况下检查该条件

window.onresize = function(event) {
    // add your if condition here
};

对于jquery,只需使用以下命令

$(window).resize(function() {
    // add you if condition here
});

$(window).width()

当您调用这样的函数时,在执行该函数时会返回一个值。如果您想在调整大小、单击文档等时提供值,则必须添加事件侦听器。

$(window).on('resize', function() {

    console.log( $(window).width() )

});