Question

The desired behavior is:

• click on parent to open dropdown menu
• click anywhere on page or on parent, to close dropdown menu

My jQuery code works fine in Safari & Firefox, but not in IE 8. In IE 8 the dropdown menu opens and closes again when the parent is clicked for the first time. The second time the parent is clicked the dropdown menu stays open. I am using jQuery 1.6.2.

Here’s the jQuery code (a bit of a Frankenstein I have cobbled together from different methods I read about):

$(function() {
/* for keeping track of what's "open" */
    var activeClass = 'menu-open', showingDropdown, showingMenu, showingParent;
    /* hides the current menu */
    var hideMenu = function() {
        if(showingDropdown) {
            showingDropdown.removeClass(activeClass);
            showingMenu.fadeOut(500);
        }
    };

    /* recurse through dropdown menus */
    $('.drop').each(function() {
        /* track elements: menu, parent */
        var dropdown = $(this);
        var menu = dropdown.next('.subnav'), parent = dropdown.parent();
        /* function that shows THIS menu */
        var showMenu = function() {
            hideMenu();
            showingDropdown = dropdown.addClass('menu-open');
            showingMenu = menu.show();
            showingParent = parent;
        };
        /* function to show menu when clicked */
        dropdown.attr('href','/#dropdown').bind('click',function(e) {
            if(e) e.stopPropagation();
            if(e) e.preventDefault();
            if ( dropdown.hasClass('menu-open') ) {
                hideMenu();
            } else {
                showMenu();
            }
        });
        /* function to show menu when someone tabs to the box */
        dropdown.bind('focus',function() {
            showMenu();
        });

    });
});

It would be much appreciated if anyone could give me a pointer as to why IE would be behaving differently than Webkit & Firefox. A link to an existing solution that does what I describe would also be great. Please explain as if you were talking to a slow child, because jQuery / Javascript is not my forte.

Answer 1

showMenu(); is getting called on focus (mouse down) then on “click” (mouse release) hideMenu(); is getting called which is why if you click on it again it works because it’s already focused. but if you were to click off of it I bet you would get the the same behaviour.. I would remove ‘focus’ code imo or make “focus” so it doesn’t interfere with “click”