jQuery 触发功能高于一定的窗口宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14504079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery trigger function above a certain window width
提问by Dan
I'm having a lot of problems with some jQuery I'm trying to write. I need one function to be available all the time, and one function to be available when the users window is greater than a set width. Here are my functions, both running in jQuery(document).ready(function($){
我在尝试编写的一些 jQuery 中遇到了很多问题。我需要一个功能一直可用，当用户窗口大于设置宽度时，我需要一个功能可用。这是我的功能，都在运行jQuery(document).ready(function($){
Function for drop down menus, should only happen when the window is larger than set amount;
下拉菜单的功能，应该只在窗口大于设置数量时发生；
//the dropdown code for desktop users
function largeDropDown(){
$('#nav ul li').hover(
//open
function(){ $(this).find('ul').stop().slideDown(300); },
//close
function(){ $(this).find('ul').stop().slideUp(300); }
);
}
And this one is available all the time, although it would be nice to know how to make this one conditional to the screen size also.
而且这个一直可用，尽管知道如何使这个也以屏幕尺寸为条件会很好。
//the dropdown code for smaller screens
$('a.menu_trigger').click(openMenu);
function openMenu(e){
e.preventDefault();
if($(this).next('ul').hasClass('open_menu')){
$(this).next('ul').slideUp(300).removeClass('open_menu');
$(this).html("↓");
} else {
$(this).next('ul').slideDown(300).addClass('open_menu');
$(this).html("↑");
}
}
Using CSS media queries, the a.menu_triggeris hidden when the window is over 768px. That way the jQuery won't do anything (at least that's my attempt at getting this to work!)
使用 CSS 媒体查询，a.menu_trigger当窗口超过 768 像素时隐藏。这样 jQuery 就不会做任何事情（至少这是我试图让它工作的尝试！）
So, I'd like to know how to make the first function work above 768px, and also how to call this functionality on a window resize. Any help would be great! Thanks.
所以，我想知道如何使第一个函数在 768px 以上工作，以及如何在调整窗口大小时调用此功能。任何帮助都会很棒！谢谢。
回答by Rémi Breton
You can bind window resize events by doing:
您可以通过执行以下操作来绑定窗口调整大小事件：
$(window).on('resize', function(event){
// Do stuff here
});
You can get the window size by doing:
您可以通过执行以下操作获取窗口大小：
var windowWidth = $(window).width();
if(windowWidth > 768){
// Do stuff here
}
Here is a jsfiddle to see it all in action.
Be careful what you bind in your window resize events. It can end up being executed dozens of times when a user naturally resize the browser. Heavy code will result in a poor user experience.
请注意在窗口调整大小事件中绑定的内容。当用户自然地调整浏览器大小时，它最终可能会被执行数十次。繁重的代码会导致糟糕的用户体验。
回答by kyle.stearns
This will check the window size every time you execute the function. If the window is less than 768px it will move forward with opening the menu. If it is larger than 768px it will not do anything (go Tigger!).
这将在您每次执行该函数时检查窗口大小。如果窗口小于 768px，它将随着打开菜单向前移动。如果它大于 768px 它不会做任何事情（去跳跳虎！）。
function openMenu(e){
if ( $(window).width() < 768 ) {
e.preventDefault();
if($(this).next('ul').hasClass('open_menu')){
$(this).next('ul').slideUp(300).removeClass('open_menu');
$(this).html("↓");
} else {
$(this).next('ul').slideDown(300).addClass('open_menu');
$(this).html("↑");
}
} else {
return false;
}
}
EDIT:Wanted to add a micro-library I've been using to execute code at specific viewport widths; it gives you the capability to leverage media queries in JavaScript. I'd recommend checking out enquire.js.
编辑：想添加一个我一直用来在特定视口宽度执行代码的微型库；它使您能够利用 JavaScript 中的媒体查询。我建议检查enquire.js。
回答by steve moretz
This simple implementation will let it happen only once.test will be altered.once going upper than 1077 and once coming down at it.nothing in the middle.You can remove the first alert('test');so it will happend now only when going upper than 1077 and remove the second to...
这个简单的实现只会让它发生一次。测试将被改变。一旦超过 1077，一旦下降到它。中间什么都没有。你可以删除第一个警报（'测试'）；所以它现在只会发生当高于 1077 并删除第二个以...
var isAbove1077 = $(window).width() > 1077;
$(window).on('resize', function(event){
if( $(window).width() < 1077 && isAbove1077){
isAbove1077 = false;
alert('test');
}else if($(window).width() > 1077 && !isAbove1077){
isAbove1077 = true;
alert('test');
}
});
