javascript - 为什么 jquery 调整大小不起作用？

Question

我正在制作响应式菜单。我将更改菜单的代码放在一个名为文件的函数中。 当文档或窗口调整大小时，Jquery 再次调用函数文件以更改菜单。但这是行不通的。 当我加载页面时它可以工作，但在调整大小时它不会。

Jquery:

var width = $(window).width();

file();
function file(){
  if(width <= 400){
      $('.link').remove();
      $('head').append('<link class="link" rel="stylesheet" href="nav2.css">');
  }else if(width >400){
      $('.link').remove();
      $('head').append('<link class="link" rel="stylesheet" href="nav.css">');

  }else{
      alert('error');
  }
}
$(window).resize(function(){
  file();
});

$(document).resize(function(){
  file();
});

谁能帮我解决这个问题

Answer 1

您的 width 变量一旦设置就不会改变。您应该将它移到函数声明中。

function file(){
  var width = $(window).width();
  if(width <= 400){
    $('.link').remove();
    $('head').append('<link class="link" rel="stylesheet" href="nav2.css">');
  }else if(width >400){
    $('.link').remove();
    $('head').append('<link class="link" rel="stylesheet" href="nav.css">');
 }else{
  alert('error');
 }
}