jQuery触发器函数超过某个窗口宽度

Question

我正在尝试编写一些jQuery,我遇到了很多问题.我需要一个函数一直可用,并且当用户窗口大于设置宽度时,有一个函数可用.这是我的功能,都在运行jQuery(document).ready(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媒体查询a.menu_trigger时,窗口超过768px时会隐藏.这样jQuery就不会做任何事情(至少我试图让它工作!)

所以,我想知道如何使第一个函数在768px以上工作,以及如何在窗口调整大小时调用此功能.任何帮助都会很棒!谢谢.

Answer 1

您可以执行以下操作来绑定窗口调整大小事件

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

你可以通过这样做来获得窗口大小:

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

这是一个jsfiddle,可以看到它的全部动态.

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