JavaScript 媒体查询破坏了 greensock

Question

我正在尝试使用 JavaScript 和 Greensock 创建一个在单击时滑入和滑出的导航栏。出于某种原因，当以不同的尺寸点击时，点击操作随机无法正常工作，但有时它可以正常工作。

我的代码如下，您可以在以下位置找到此导航的实时示例：http://www.kramergraphicdesign.com/Maura_Website/

    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();

});

Answer 1

首先，resize 事件可能会发生很多，尤其是在拖动以调整窗口大小的过程中。这意味着两件事：

1. 尽量减少您的工作量，使其快速运行，或debounce 函数（例如using Lodash）使其仅在您停止接收调整大小事件一小段时间后运行。
2. 更重要的是，您每次都会添加一个新的click 处理程序。

所以它“随机”不做任何事情的原因是，每当您单击时，如果您之前完全调整了窗口大小，您实际上会运行您的函数来多次切换菜单。如果该次数恰好是偶数，则没有净效应。

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

1. 附加一次点击处理程序，但检查处理程序内部的宽度以确定动画到多远/如何以不同的方式响应不同的大小。
2. 在重新添加之前先取消注册现有的点击事件（使用 jQuery 的.off()），所以只注册了一个处理程序。我建议使用事件命名空间，这样您就可以立即取消注册命名空间中的所有内容。

额外观察：您的平板电脑宽度条件意味着桌面代码永远不会运行，因为平板电脑块没有<= 1024 条件。