Javascript 在调整显示大小后重新加载jquery脚本

如果页面大小更改，我对jquery脚本有问题。例如，如果您在手机上打开站点，然后打开并关闭菜单，然后将手机从垂直方向旋转到水平方向并再次打开菜单，则不会显示该块

我使用这个脚本

return $(document).ready(function() {
  (function($) {
    if ($(window).width() < 960) {
      $('#header-menu').css('display', 'none');
      $('header.grid-container').css('display', 'none');
      return $('#toggle-mobile-menu').click(function() {
        $('#header-menu').toggle();
        return $('header.grid-container').toggle();
      });
    }
  })(jQuery);
});

return$（document）.ready（function（）{
（函数（$）{
如果（$（窗口）.width（）<960）{
$（'#标题菜单'）.css（'display'，'none'）；
$（'header.grid container'）.css（'display'，'none'）；
返回$（“#切换移动菜单”）。单击（函数（）{
$（“#标题菜单”）.toggle（）；
返回$（'header.grid container'）.toggle（）；
});
}
})（jQuery）；
});

---

我需要一些钩子也许，重新加载脚本，如果屏幕被改变，而不重新加载页面。我试图使用

$（window）.resize（）

，但它不起作用

Jquery不可能被放入DOM，需要刷新页面才能更改脚本

---

你应该考虑使用Ajax。

问题是，在加载所有DOM元素之后，脚本只被触发一次（您正在检查屏幕宽度，如果条件已经完成，则触发事件）。我建议将样式设置移到CSS（媒体查询）中，并仅对绑定事件使用jquery

CSS

@media (max-width: 960px) {
    #header-menu,
    .grid-container { display: none; }

    #toggle-mobile-menu { display: block; } // or whatever
}

$(function(){
    $('#toggle-mobile-menu').on('click', function() {
        $('#header-menu').toggle();
        $('header.grid-container').toggle();
    }
});

JS

@media (max-width: 960px) {
    #header-menu,
    .grid-container { display: none; }

    #toggle-mobile-menu { display: block; } // or whatever
}

$(function(){
    $('#toggle-mobile-menu').on('click', function() {
        $('#header-menu').toggle();
        $('header.grid-container').toggle();
    }
});

---

您必须刷新页面。谢谢，okay将尝试使用AJAX解决问题，或者将找到另一种方法。谢谢你的回答，用AJAX解决这个问题应该没有问题，祝你好运