Javascript/jQuery在不同屏幕大小上启动和停止函数

我有一系列基于用户视图端口宽度的函数。然后，当用户重新调整大小时，我开始编写一些代码来打开和关闭函数

但是，当我再次调用此函数时，它会停止正常工作

它是一个用于手持设备上的用户的展开和折叠菜单，它使用slideUp（）和slideDown（）jQuery函数打开和关闭每个嵌套列表

最初调用时，它可以正常工作，但当用户向上缩放浏览器然后再向下缩放时，它就坏了。它试图同时扩张和崩溃。也许我在禁用此功能并再次调用时犯了一个错误？如果你想让我更详细地解释我想要什么，请告诉我

这是我的密码：

/*  Load Nav Functions
 *  ------------------
 *  Checks the width of browser and only loads functions that are needed for that size
 */
var viewportWidth = $(window).width();  // store viewport width

if (viewportWidth < 1024 ) {                // fire up mobile nav if screensize small enough
    navToggle();        
    mobileNav();
    addMenuArrows();
    mobileSearchExpand();
} else {
    disableMobileNav();
}


/*  On Resize Events
 *  ----------------
 *  We only want the code to runs after a few milliseconds to improve performance:
 *  http://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery
 */
var resizeTimer;                    // resetable var for the timeout

$(window).resize(function() {

clearTimeout(resizeTimer);      // start from zero

resizeTimer = setTimeout(function() {

    var viewportWidth = $(window).width();

    if (viewportWidth < 1024 ) {
        navToggle();
        mobileNav();
        addMenuArrows();
        resetFooterState();

    } else {
        disableMobileNav();
    } 


}, 100); // end of time out


});


/*
 * Hide Menu and Create Slide Function
 */
function navToggle() {

$('#mainNav').css({'display':'none'});

$('#navToggle').bind("click", function() {

    if (!$('#mainNav').hasClass('down')) {
        $('#mainNav').removeClass('up').addClass('down').stop().slideDown(400);
    } else {
        $('#mainNav').removeClass('down').addClass('up').stop().slideUp(400);
    }

    return false;

});

}

/*
 *  Slide Up or Down Depending on Click 
 */
function mobileNav() {

$('#mainNav li a').bind("click", function() {

    /* jump to parent list item */
    var listItem  = $(this).parent();

    /* store sub menu */
    var subNav    = listItem.children('ul');

    if (!subNav.hasClass('down')) {
        /* display the sub menu */
        subNav.removeClass('up').addClass('down').stop().slideDown(400);
    } else {
        /* hide the sub menu */
        subNav.removeClass('down').addClass('up').stop().slideUp(400);
    }

    return false;

});
}


 /*
 *  Add drop down arrows to menus with sub menus
 */
function addMenuArrows() {

$('#mainNav li').each(function() {

    var hasSubMenu = $(this).children('ul');

    if(hasSubMenu.length) {
        $(this).children('a').addClass('hasSubMenu');
    }

});

}

/*
 *   Reset menu for large display
 */
 function disableMobileNav() {

$('#mainNav').css({'display':'block'});

$('#navToggle').unbind();
$('#mainNav li a').unbind().removeClass('hasSubMenu');

 }

/*加载导航功能
*  ------------------
*检查浏览器的宽度，并仅加载该大小所需的功能
*/
var viewportWidth=$（窗口）.width（）；//存储视口宽度
如果（viewportWidth<1024）{//如果屏幕尺寸足够小，则启动移动导航
导航切换（）；
mobileNav（）；
addMenuArrows（）；
mobileSearchExpand（）；
}否则{
禁用obilenav（）；
}
/*关于调整事件大小
*  ----------------
*我们只希望代码在几毫秒后运行以提高性能：
*  http://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery
*/
var resizeTimer；//超时的可重置变量
$（窗口）。调整大小（函数（）{
clearTimeout（resizeTimer）；//从零开始
resizeTimer=setTimeout（函数（）{
var viewportWidth=$（窗口）.width（）；
如果（视口宽度<1024）{
导航切换（）；
mobileNav（）；
addMenuArrows（）；
resetFooterState（）；
}否则{
禁用obilenav（）；
} 
}，100）；//超时结束
});
/*
*隐藏菜单和创建幻灯片功能
*/
函数navToggle（）{
$（'mainNav'）.css（{'display'：'none'}）；
$（'#navToggle'）。绑定（“单击”，函数（）{
if（！$（'mainNav'）.hasClass（'down'））{
$（'mainNav'）.removeClass（'up'）.addClass（'down'）.stop（）.slideDown（400）；
}否则{
$（'mainNav'）.removeClass（'down'）.addClass（'up'）.stop（）.slideUp（400）；
}
返回false；
});
}
/*
*根据单击向上或向下滑动
*/
函数mobileNav（）{
$（'mainNav li a'）.bind（“单击”，函数（）{
/*跳转到父列表项*/
var listItem=$（this.parent（）；
/*存储子菜单*/
var subNav=listItem.children（'ul'）；
如果（！subNav.hasClass（'down'））{
/*显示子菜单*/
subNav.removeClass（'up'）.addClass（'down'）.stop（）.slideDown（400）；
}否则{
/*隐藏子菜单*/
subNav.removeClass（'down'）.addClass（'up'）.stop（）.slideUp（400）；
}
返回false；
});
}
/*
*向带有子菜单的菜单添加下拉箭头
*/
函数addMenuArrows（）{
$（'mainNav li'）。每个（函数（）{
var hasSubMenu=$（this.children（'ul'）；
if（hasSubMenu.length）{
$（this.children（'a'）.addClass（'hasSubMenu'）；
}
});
}
/*
*大屏幕显示的重置菜单
*/
函数禁用obilenav（）{
$（'mainNav'）.css（{'display'：'block'}）；
$（'#navToggle'）.unbind（）；
$（'mainNav li a'）.unbind（）.removeClass（'hasSubMenu'）；
}

您似乎试图在用户更改浏览器大小时重新绑定事件。一点也不好。但您可以先尝试.unbind（），然后再绑定

似乎您试图在用户更改浏览器大小时重新绑定事件。一点也不好。但是您可以先尝试.unbind（），然后再绑定

您听说过CSS3媒体查询吗？您可以在一行代码中根据屏幕分辨率添加/删除类。您听说过CSS3媒体查询吗？您可以在一行代码中根据屏幕分辨率添加/删除类。