JavaScript媒体查询打破格林斯托克

我正在尝试创建一个导航栏，当使用JavaScript和Greensock单击时，它会滑入滑出。由于某些原因，当以不同的大小单击时，单击操作随机不起作用，但有时它工作得非常好

我的代码如下，您可以在以下网址找到此导航的实时示例：

var resize=function（）{
var viewportWidth=$（窗口）.width（）；
var lastLiWith=$（'#logo'）.width（）；
log（openOrShut+“这是真的假变量”）；
如果（$（window.width（）>=0&&$（window.width（）=640）{
控制台日志（“平板”）；
$（“#徽标，#关闭，.向右箭头”）。单击（函数（）
{
console.log（“平板电脑点击”）；
if（openOrShut==false）
{
TweenLite.to（“#自定义导航“，”.5“，{x:400}）；
openOrShut=true；
}
否则{
TweenLite.to（“#自定义导航“，”.5“，{x:0}）；
openOrShut=false；
}
});
} 
否则，如果（$（window）.width（）>=1025&&$（window）.width（）首先，
resize
事件可能会大量发生，尤其是在拖动以调整窗口大小的过程中。这意味着两件事：

尽可能减少您所做的工作量，使其快速运行，或使功能（例如）仅在您短时间内停止接收调整大小事件后运行
更重要的是，您每次都要添加一个新的
单击
处理程序

因此，它“随机”不起任何作用的原因是，每当你点击时，如果你以前调整过窗口的大小，你实际上会运行你的函数来切换菜单很多次。如果这个次数恰好是偶数，那么就没有净效果

可能有多种方法可以解决此问题，但这里有两种：

附加一次单击处理程序，但请检查处理程序内部的宽度，以确定将其设置为动画的距离/如何对不同的大小做出不同的响应
在重新添加现有的click事件之前，请先注销现有的click事件（使用jQuery的
.off（）
），这样就只能注册一个处理程序。我建议使用事件命名空间，以便您可以一次注销命名空间上的所有内容
额外观察：您的平板电脑宽度条件意味着桌面代码永远不会运行，因为没有

    var resize = function(){
    var viewportWidth = $(window).width();
  var lastLiWith = $('#logo').width();

  console.log(openOrShut + " this is the true false var");


   if ($(window).width() >= 0 && $(window).width() <= 639 ) {  


          console.log("mobile");
          $("#logo, #close, .arrow-right").click(function()
          {
            console.log("mobile-click");
            if(openOrShut === false)
            {
              TweenLite.to("#custom-nav",".5",{x:viewportWidth-lastLiWith});
              openOrShut = true;
            }

            else{
              TweenLite.to("#custom-nav",".5",{x:0});
              openOrShut = false;
            }
          });

   }

   else if ($(window).width() >= 640 ) {  

          console.log("tablet");
          $("#logo, #close, .arrow-right").click(function()
          {
            console.log("tablet-click");
            if(openOrShut === false)
            {
              TweenLite.to("#custom-nav",".5",{x:400});
              openOrShut = true;
            }

            else{
              TweenLite.to("#custom-nav",".5",{x:0});
              openOrShut = false;
            }
          });


   } 

   else if ($(window).width() >= 1025 && $(window).width() <= 10000 ) {  

          console.log("dekstop");
          $("#logo, #close, .arrow-right").click(function()
          {
            console.log("desktop-click");
            if(openOrShut === false)
            {
              TweenLite.to("#custom-nav",".5",{x:400});
              openOrShut = true;
            }

            else{
              TweenLite.to("#custom-nav",".5",{x:0});
              openOrShut = false;
            }
          });

   } 
 };





$(document).ready(resize);



$(window).resize(function(){

resize();

});