jquery - jQuery-サイズ変更イベントにバインドされた関数が一貫して機能しない

Question

メニューのクリックトグルとして機能するコードがいくつかあります。ウィンドウ幅が768px未満の場合にのみコードを実行したいので、ウィンドウ幅を計算するifステートメントでコードをラップしました。この関数をページサイズ変更イベントとページレディにバインドしました。一部の時間は機能しますが、他の時間は機能しません。結果パネルのサイズを数回変更すると、意味がわかります...

http://jsfiddle.net/agileapricot/LyUzr/

Answer 1

重要な問題ではありませんがjQuery("#nav-btn a.togglemenu")、jQuery("#nav a.togglemenu")

aaMenus関数内にクリックハンドラーを追加したので、次の行になります。

jQuery(window).bind("resize", aaMenus);

...ウィンドウのサイズが変更されるたびに、関数を実行し、新しいクリックハンドラーを追加しています。クリックハンドラーが偶数回追加されている場合は、オンとオフを同時に切り替えているため、結果は表示されません。奇数回追加された場合でも、トグルを連続して最大数百回実行しているため、大幅な遅延が発生します。

あなたがする必要があるのはあなたの関数からそのクリックイベントハンドラーを取り除くことです：http： //jsfiddle.net/mblase75/LyUzr/10/

function aaMenus() {
    if (jQuery(window).width() > 768) { // iPad and Desktop
        /* Dropdown Menu */
        jQuery("ul#menu").addClass("dropdown").removeClass("toggle").show();
        jQuery("a.togglemenu").hide();

        //.. Drop down function will go here later
    } else { // Mobiles
        /* Toggle menu */
        jQuery("ul#menu").addClass("toggle").removeClass("dropdown").hide();
        jQuery("a.togglemenu").show();
    }
}

jQuery(window).bind("resize", aaMenus);

jQuery(document).ready(function() {
    jQuery("#nav a.togglemenu").click(function() {
        jQuery("ul.toggle").toggle();
    });
    aaMenus();
});