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);

...正在运行该功能，并且每次调整窗口大小时都会添加新点击处理程序，。如果添加了单击处理程序，则会添加偶数个时间，你在同一时间打开和关闭，没有明显的结果。即使它被添加了奇数次，你也会连续几次运行切换，导致很大的延迟。

您需要做的就是从您的函数中取出click事件处理程序： 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();
});

jQuery - 绑定调整事件的函数不能始终如一地工作

1 个答案: