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

时间:2013-01-24 14:49:31

标签: jquery function resize window

我正在尝试编写一些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媒体查询时,当窗口超过768px时隐藏a.menu_trigger。这样jQuery就不会做任何事情(至少我试图让它工作!)

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

3 个答案:

答案 0 :(得分:22)

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

$(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

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

答案 1 :(得分:1)

每次执行该功能时都会检查窗口大小。如果窗口小于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

答案 2 :(得分:0)

这个简单的实现只会让它发生一次。测试将被更改。一旦高于1077然后下降到它。没有任何中间。您可以删除第一个alert('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');
            }
        });