Question

如果页面大小已更改，我的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()，但它不起作用

Answer 1

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

您应该考虑使用AJAX。

Answer 2

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

<强> CSS

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

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

<强> JS

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

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

2 个答案: