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事件可能发生很多，尤其是在拖动窗口大小的过程中。这意味着两件事：

最大限度地减少您的工作量，使其快速运行，或debounce该功能（例如using Lodash），这样只有在您停止接收调整大小事件一小段时间后才能运行。
更重要的是，您每次都要添加一个新的click处理程序。

因此，“随机”不做任何事情的原因是，无论何时单击，您实际上都会运行您的功能，如果您之前已经调整了窗口大小，可以多次切换菜单。如果这个次数恰好是偶数，则没有净影响。

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

附加一次点击处理程序，但检查处理程序内部的宽度，以确定将其设置为动态到/以不同方式对不同大小做出不同响应的距离。
在重新添加之前首先取消注册现有的点击事件（使用jQuery的.off()），因此只有一个处理程序已注册。我建议使用事件命名空间，以便您可以立即取消注册命名空间中的所有内容。

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

JavaScript媒体查询破坏绿色邮件

1 个答案: