Question

我根据用户view-port的宽度启动了一系列功能。然后，当用户重新调整大小时，我厌倦了编写一些打开和关闭函数的代码。

但是，当我再次调用它时，此功能会停止正常工作。

它是手持设备上人们的扩展和折叠菜单，它使用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');

 }

Answer 1

您似乎尝试在用户更改浏览器大小上重新绑定事件。它根本不好。但你可以先尝试.unbind（）然后绑定

Javascript / jQuery在不同的屏幕尺寸上启动和停止功能

1 个答案: