调整显示大小后重新加载 jquery 脚本答案

【问题标题】：Reload jquery script after resize display调整显示大小后重新加载 jquery 脚本
【发布时间】：2015-05-21 09:33:00
【问题描述】：

如果页面大小更改，我的 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);
});

我可能需要一些钩子来重新加载脚本，如果屏幕被改变，而不需要重新加载页面。我尝试使用$(window).resize()，但没有成功

【问题讨论】：

标签： javascript jquery html css resize

【解决方案1】：

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

您应该考虑改用 AJAX。

【讨论】：

您必须刷新页面。
谢谢，好的会尝试用AJAX解决，或者会找到其他方法。谢谢你的回答
用 AJAX 解决应该没问题，祝你好运

【解决方案2】：

问题是您的脚本在加载所有 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();
    }
});

【讨论】：