不刷新 Jquery 媒体查询不适用答案

【问题标题】：Jquery media queries isn't apply without refreshing不刷新 Jquery 媒体查询不适用
【发布时间】：2017-09-18 18:37:02
【问题描述】：

我的页面中有以下代码。背景颜色效果很好。但我必须刷新才能看到关于 li 的变化。如果我不刷新，li有之前的效果。例如在窗口屏幕较小 500 px 中，li 无需点击即可显示。

function myFunction() {
  if ($(window).width() < 500) {
    $('body').css('background', 'black');
    $("nav").click(function() {
      $("li").toggle('slow');
    });
  } else {
    $('body').css('background', 'blue');
    $("li").show();
  }
}

【问题讨论】：

标签： jquery css media-queries

【解决方案1】：

将您的代码作为一个函数并在 onload 和窗口调整大小时调用它，如下所示

$(window).load(function(){
   //your function
});
$(window).resize(function(){
  //your function
});

【讨论】：

谢谢@Prons，在onload中没有任何改变，仍然是同样的问题
也调用 $(window).resize 中的函数。因此，当窗口大小发生变化时，该函数将触发并检查窗口宽度。根据条件状态，它将应用背景。 $(window).load 用于对页面加载进行相同的检查。

【解决方案2】：

您还需要在调整大小时触发它，因此如果您调整窗口大小，它将触发类似的查询

$(window).on("load resize",function(){
  //your code goes here
  if ($(window).width() < 500) {
    $('body').css('background', 'black');
    $("nav").click(function() {
      $("li").toggle('slow');
    });
  } else {
    $('body').css('background', 'blue');
    $("li").show();
  }
}

【讨论】：

谢谢@Traver，我尝试使用你的想法，但还是同样的问题。
所以嗯。我猜我理解你的问题是错误的。但是你不能只用 css 查询来做到这一点

【解决方案3】：

$("nav").click(function() {
  $("li").toggle('slow');
});

function myFunction() {
  if ($(window).width() < 500) {
    $('body').css('background-color', 'black');
  } else {
    $('body').css('background-color', 'blue');
    $("li").show();
  }
}

而不是background，你应该background-color
其次，您可以在函数外部使用click，而不是在内部定义它。
假设，myFunction 在resize 或load 上被触发/调用

【讨论】：