ユーザーのビューポートの幅に基づいて起動する関数がたくさんあります。その後、ユーザーがサイズを変更したときに機能をオンまたはオフにするコードを書くのにうんざりしました。
ただし、この関数を再度呼び出すと、この関数は正しく動作しなくなります。
これは、ハンドヘルド デバイスのユーザー向けの展開および折りたたみメニューであり、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');
}