问题 - 如何将窗口调整大小侦听器添加到文档就绪 jquery 函数？答案

【问题标题】：Question - How to add window resize listener to document ready jquery function?问题 - 如何将窗口调整大小侦听器添加到文档就绪 jquery 函数？
【发布时间】：2019-01-11 12:46:37
【问题描述】：

我有一个打开子菜单的 jquery 脚本，但我需要它在不同的窗口大小下以不同的方式运行。

我通过媒体查询在画布上和画布外使用了一个主菜单。问题是我的打开子菜单的脚本在站点加载时可以正常工作，但是如果您将窗口的大小调整为高于或低于 768px（这是在画布上和画布外菜单之间切换的断点），则脚本不会'没有相应的回应。相反，它会继续以原始窗口大小运行。

如何添加窗口调整大小侦听器，以便在窗口大小调整到 768px 断点以上或以下后正确触发脚本。

感谢您提供的任何帮助。我真的很感激。

这是我的脚本：

$(document).ready(function() {
  if (window.matchMedia('(max-width: 767px)').matches)
  {
    $('.toggle-sub').click(function() {
      $(this).children('.menu-sub').slideToggle(200);
      $(this).find('i').toggleClass('fa-chevron-up');
    });
  } else {
    $('.toggle-sub').hover(function() {
      $(this).children('.menu-sub').slideToggle(200);
      $(this).find('i').toggleClass('fa-chevron-up');
      $(this).siblings().find('.menu-sub').slideUp(200);
      $(this).siblings().find('i').removeClass('fa-chevron-up');

      $('html').click(function(e) {
        if (e.target != '.menu-sub' && $(e.target).parents('.menu-main').length == 0) {
          $('.menu-sub').slideUp(200);
          $('.menu-main').find('i').removeClass('fa-chevron-up');
        };
      });
    });
  }
});

【问题讨论】：

你也可以添加你的html吗？
我在下面的 cmets 中有一个 codepen，它显示了我正在使用的带有 html 和 css 的原始脚本。
你的预期输出是什么？
我希望子菜单在低于或等于 767px 时展开 onclick 并在高于或等于 768px 时展开悬停。这样offcanvas菜单是onliclick，oncanvas菜单是onhover。

标签： jquery

【解决方案1】：

jQuery 有一个resize() 函数。你需要做的是将你的函数包装在这个函数中。

$(window).on('resize', function(e){
    YOUR FUNCTION GOES IN HERE

})

使用window.innerWith 检查当前窗口宽度。

【讨论】：

感谢您的帮助。但由于某种原因，它不能正常工作。它在加载时工作，但是当我调整窗口大小超过 768px 断点时，它会导致子菜单重复上下滚动。我该如何阻止它？再次感谢。
能否提供 HTML 标记，好吗？或者您可以在您的问题下设置一个快速代码演示。其他人更容易调试。
我在 codepen 中得到的结果与在我的测试框中得到的结果不同。不知道为什么，但这里是原始的 codepen：codepen.io/jamillard/pen/YdJEZB 和新的 codepen codepen.io/jamillard/pen/jXeaKB。
当屏幕尺寸低于768时，您的子菜单只是上下滑动，这是您的问题吗？由于您没有在问题中提及问题的样子。
如果您从 768px 断点上方开始，oncanvas 菜单可以正常工作，但在调整大小低于 768px 时，offcanvas 子菜单会重复上下滚动。如果您从 768px 以下开始，offcanvas 可以正常工作，但在将大小调整到 768px 以上之后，oncanvas 子菜单会重复上下滚动。这就是我在本地盒子上得到的结果，但代码笔的功能有点不同，但仍然不正确。再次感谢。

【解决方案2】：

试试

function adjustMenu(){
  if (window.matchMedia('(max-width: 767px)').matches)
  {
    $('.toggle-sub').click(function() {
    $(this).children('.menu-sub').slideToggle(200);
    $(this).find('i').toggleClass('fa-chevron-up');
  });
  } else {
    $('.toggle-sub').hover(function() {
    $(this).children('.menu-sub').slideToggle(200);
    $(this).find('i').toggleClass('fa-chevron-up');
    $(this).siblings().find('.menu-sub').slideUp(200);
    $(this).siblings().find('i').removeClass('fa-chevron-up');
    $('html').click(function(e) {
    if (e.target != '.menu-sub' && $(e.target).parents('.menu-main').length == 0) {
      $('.menu-sub').slideUp(200);
      $('.menu-main').find('i').removeClass('fa-chevron-up');
    };
   });
  });
}

$(document).ready(function() {
      adjustMenu();
     $(window).on('resize',function(){
           adjustMenu();
     });
});

注意：只是在adjustMenu()中使用了你自己的代码，

【讨论】：

感谢您的帮助。我试过了，使用 menuSub() 作为函数，由于某种原因，它不起作用，它破坏了我所有的其他 jquery 脚本。我复制并粘贴了您的代码并得到了相同的结果。我不知道为什么，因为我的第一个想法是这个解决方案......我还没有弄清楚为什么它会破坏一切，但是在我到 Speir 的 cmets 中（上图），我的原始代码有一个 codepen。
你能在 jsfiddle 上创建一个副本吗？使用 html、css 和脚本。我可以看看