超过一定窗口宽度的jQuery触发函数答案

【问题标题】：jQuery trigger function above a certain window width超过一定窗口宽度的jQuery触发函数
【发布时间】：2013-01-24 14:49:31
【问题描述】：

我在尝试编写一些 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("&darr;");
    } else {
        $(this).next('ul').slideDown(300).addClass('open_menu');
        $(this).html("&uarr;");
    }

}

使用 CSS 媒体查询，当窗口超过 768 像素时，a.menu_trigger 被隐藏。这样 jQuery 就不会做任何事情（至少这是我试图让它工作的尝试！）

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

【问题讨论】：

跳跳机功能是否会转动元素条纹并使其上下弹跳？ ;-)

标签： jquery function resize window

【解决方案1】：

您可以通过以下方式绑定窗口调整大小事件：

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

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

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

Here is a jsfiddle to see it all in action.

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案3】：

这个简单的实现只会让它发生一次。测试将被改变。一次高于 1077，一次低于它。中间没有任何内容。你可以删除第一个警报（'test'）；所以它会现在仅在高于 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');
            }
        });

【讨论】：