我根据用户视口的宽度启动了一堆函数。然后，当用户重新调整大小时，我厌倦了编写一些打开和关闭功能的代码。
但是，当我再次调用它时，此功能将停止正常工作。
它是一个为手持设备上的人们提供的展开和折叠菜单，它使用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');
}