如果没有刷新，Jquery媒体查询将不适用

Question

我的页面中有以下代码。背景颜色完美。但我必须刷新才能看到 li 的变化。如果我不刷新， li 具有以前的效果。例如在Windows屏幕较小的500像素， li 显示没有点击。

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

Answer 1

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

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

Answer 2

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

1. 您应该background
而不是background-color
2. 其次，你可以在函数外部click而不是在里面定义它。
3. 假设myFunction或resize
触发/调用load

Answer 3

将您的代码作为一个函数，并在onload和on window resize上调用它，如下所示

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