Question

我有一个打开子菜单的jquery脚本，但是我需要它在不同的窗口大小下具有不同的功能。

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

如何添加窗口调整大小的侦听器，以便在窗口大小调整为高于或低于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');
        };
      });
    });
  }
});

Answer 1

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

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

})

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

Answer 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（）中使用了自己的代码，

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

2 个答案: