jQuery触发器函数高于某个窗口宽度

我正在尝试编写一些jQuery，我遇到了很多问题。 我需要一个函数一直可用，并且当用户窗口大于设置宽度时，有一个函数可用。 这是我的函数，都运行在jQuery(document).ready(function($){

下拉菜单的function只应在窗口大于设定量时发生;

 //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); } ); } 

而这一个一直都可用，虽然知道如何使这个也适应屏幕尺寸会很好。

 //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("↑"); } } 

使用CSS媒体查询时，当窗口超过768px时，将隐藏a.menu_trigger 。 这样jQuery就什么都不做了（至少那是我试图让它工作的尝试！）

所以，我想知道如何使第一个函数在768px以上工作，以及如何在窗口resize时调用此function。 任何帮助都会很棒！ 谢谢。

Answer 1

您可以执行以下操作来绑定窗口resize事件

 $(window).on('resize', function(event){ // Do stuff here }); 

您可以通过以下方式获取窗口大小：

 var windowWidth = $(window).width(); if(windowWidth > 768){ // Do stuff here } 

这是一个jsfiddle，看到它全部在行动 。

在窗口resize事件时要小心绑定的内容。 当用户自然地调整浏览器大小时，它最终会被执行数十次。 繁重的代码会导致糟糕的用户体验。

Answer 2

这将在每次执行该function时检查窗口大小。 如果窗口小于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; } } 

编辑：想要添加一个微库，我一直用它来执行特定视口宽度的代码; 它使您能够在JavaScript中利用媒体查询。 我建议看看enquire.js 。