高于特定窗口宽度的jQuery触发功能(jQuery trigger function above

我有很多的一些问题，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看到这一切的行动 。

小心你在窗口绑定调整事件。 它可以最终被执行数十次当用户自然地调整浏览器。 重码会导致糟糕的用户体验。

Answer 2:

这将在每次执行函数时检查窗口大小。 如果窗口小于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("&darr;");
        } else {
            $(this).next('ul').slideDown(300).addClass('open_menu');
            $(this).html("&uarr;");
        }
    } else {
        return false;
    }
}

编辑：希望增加我一直在使用特定视口的宽度，以执行代码微型库; 它可以让你利用媒体查询在JavaScript的能力。 我建议你检查出enquire.js 。

文章来源: jQuery trigger function above a certain window width