Question

I have some code that acts as a click toggle for a menu. I only want the code to run if the window width is under 768px, so I wrapped it in an if statement, that calculates the window width. I bound this function to the page resize event and page ready. It works some of the time but not others. Resize the results panel a few times and you’ll see what I mean…

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

Answer 1

Not the key issue, but: jQuery("#nav-btn a.togglemenu") should be jQuery("#nav a.togglemenu")

You’ve added the click handler inside the aaMenus function, so this line:

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

…is running the function, and adding a new click hander, every time the window is resized. If the click handler has been added an even number of times, you’re toggling on and off at the same time, with no visible result. Even if it’s been added an odd number of times, you’re running the toggle up to hundreds of times in a row, resulting in a huge delay.

All you need to do is take that click event handler out of your function:
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();
});