我正在尝试使用 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();
});
最佳答案
首先，resize事件可能会发生很多次，尤其是在拖动以调整窗口大小的过程中。这意味着两件事:
- 最大限度地减少您所做的工作量，使其运行速度更快，或 debounce函数(例如 using Lodash )，因此它仅在您短时间停止接收调整大小事件后运行。
- 更重要的是，您正在添加新的
click处理程序每次。
所以它“随机”不执行任何操作的原因是，每当您单击时，如果您之前调整过窗口大小，实际上会多次运行函数来切换菜单。如果该次数恰好是偶数，则没有净效应。
可能有多种方法可以解决此问题，但这里有两种:
- 附加一次点击处理程序，但检查处理程序内部的宽度以确定动画的距离/如何对不同的尺寸做出不同的响应。
- 首先取消注册现有的点击事件(使用 jQuery 的
.off())，然后再重新添加它们，因此只有一个注册的处理程序。我建议使用事件命名空间，这样您就可以立即取消注册命名空间上的所有内容。
额外观察:平板电脑宽度的条件意味着桌面代码永远不会运行，因为没有 <= 1024平板电脑 block 的条件。
关于JavaScript 媒体查询破坏 greensock，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35304558/