jquery - jQuery - 绑定到调整事件大小的函数无法始终如一地工作

Question

我有一些代码可以作为菜单的点击切换。我只希望代码在窗口宽度低于 768 像素时运行，所以我将它包装在一个 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();
});