Jquery 调整大小时的菜单转换

我的问题写在下面的钢笔上

我有工作菜单。移动宽度（1170px）

如果按这些尺寸刷新笔，然后单击菜单项，一切正常。两种尺码都有

但是，在“调整大小”时，用于控制动画的切换功能部分没有正常工作。此代码位于

标题\u toggle（）函数中

        $menu_toggle.on('click', function (e) {
            if ($(window).width()<960) {
                $(this).toggleClass('mobile_open');
                if ($(this).hasClass('mobile_open')) {
                    $navigation.fadeIn().animate({width: '70%'},250);
                } else{
                    $navigation.animate({width: '0' },250).fadeOut();
                }
            } else{
                $(this).toggleClass('open');
                if ($(this).hasClass('open')) {
                    $breadcrumbs_bar.toggle('slide', {direction: 'up'}, 250, function () {
                        $navigation.toggle('slide', {direction: 'down'}, 250).css('display', 'inline-block');
                    });
                } else {
                    $navigation.toggle('slide', {direction: 'down'}, 250, function () {
                        $breadcrumbs_bar.toggle('slide', {direction: 'up'}, 250).css('display', 'inline-block');
                    });
                }
            }
            e.preventDefault();
        });

小提琴上有所有的jquery代码。
我刚刚完成了一个菜单的编写，与您正在尝试的类似

看看这个代码笔：

isMobile（）

函数检查窗口是否处于移动分辨率

setMenuType（）

函数用于在页面加载和窗口调整大小时向导航栏添加/删除类

windowResize（）

我包含了setTimeout，因此该函数仅在窗口完成大小调整时运行

希望这能帮助您了解如何使用移动/桌面导航栏/菜单

$(document).ready(function() {

  function isMobile() {
    if (window.innerWidth < 767) {
      return true;
    }
  }

  setMenuType();     

  function setMenuType() {
    if (isMobile()) {
      $('nav').removeClass('desktop');
      $('nav').addClass('mobile');
    } else {
      $('nav').removeClass('mobile');
      $('nav').addClass('desktop');
    }
  }

  var resizeId;
  $(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(setMenuType(), 500);
  });
});

$（文档）.ready（函数（）{
函数isMobile（）{
如果（窗内宽度<767）{
返回true；
}
}
setMenuType（）；
函数setMenuType（）{
if（isMobile（））{
$（'nav'）.removeClass（'desktop'）；
$（'nav'）.addClass（'mobile'）；
}否则{
$（'nav'）.removeClass（'mobile'）；
$（'nav'）.addClass（'desktop'）；
}
}
树脂化变种；
$（窗口）。调整大小（函数（）{
clearTimeout（resizeId）；
resizeId=setTimeout（setMenuType（），500）；
});
});
我认为您应该编写关于resize的代码。我把它放在函数中，我只是调用resize。我需要分离导航，因为一旦标题有了固定位置（在移动设备上），它就是它自己的容器，所以菜单将无法工作。所以我把它拆开，预旋到身体上，这样它就可以自由膨胀了。
$(document).ready(function() {

  function isMobile() {
    if (window.innerWidth < 767) {
      return true;
    }
  }

  setMenuType();     

  function setMenuType() {
    if (isMobile()) {
      $('nav').removeClass('desktop');
      $('nav').addClass('mobile');
    } else {
      $('nav').removeClass('mobile');
      $('nav').addClass('desktop');
    }
  }

  var resizeId;
  $(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(setMenuType(), 500);
  });
});