调用屏幕尺寸更改时的功能

时间:2016-09-13 10:44:30

标签: javascript jquery html css

我目前正在使用JQuery来管理我网站上菜单的样式。我想要的是执行两个单独的函数,第一个应该在窗口宽度大于800像素时执行,第二个应该在小于800像素时执行。在下面的示例中,Switch_Menu()在页面加载时被调用,最终在窗口调整大小时被调用。平板电脑上的纵向/横向模式也是如此。一切似乎都运行正常,但我不知道如何管理两种状态之间的切换:我正试图找到一种方法来停止第一个功能并在宽度改变时运行第二个功能。

到目前为止,我所做的基本上是以下概念:

function Switch_Menu() {
if ($(window).width() > 800) { 
//function 1 is called
//where some objects on the page get hidden, some get resized
}
else { 
//function 2 is called
////where some objects on the page get hidden, some get resized
}
}

Switch_Menu();
$(window).resize(function() {Switch_Menu();});

如果我使用这段代码,当页面第一次加载时我没有问题,只有正确的函数被执行。但是,当屏幕大小改变时,两个函数会同时执行,就像没有'if'块一样。

你知道我怎么能这样做吗?我是否应该使用其他类型的JavaScript特定功能进行此类任务?

0 个答案:

没有答案
相关问题