Show menu/div onclick or onmouseover not the easy way

Question

Hi people,

I'm trying to make a menu that can collapse:

• If you click on a button div the menu shows and stays even if you hover the button div.
• If you click again on the button div the menu hides.
• When the menu is hiding onmouseenter or mouseover it shows onmouseleave or mouseout it's hiding.

I can't make this happen, this is my code:

        $(function() {
        $('#arrow').bind('mouseenter', function(){
            if($('#hoofdmenu').attr("class") == "show"){
            $('#hoofdmenu').addClass("class", "mousehide"); 
            $('#hoofdmenu').hide();
            }
            else 
            {
            $('#hoofdmenu').removeClass("class", "mousehide");  
            $('#hoofdmenu').addClass("class", "mouseshow");
            $('#hoofdmenu').show();
            }
        });

        $('#arrow').bind('click',function(){
            if ($('#hoofdmenu').attr("class") == "show"){
            $('#hoofdmenu').attr("class", "hide");  
            $('#hoofdmenu').hide();
            }
            else
            {
            $('#hoofdmenu').attr("class", "show");  
            $('#hoofdmenu').show(); 

            }
        });

     });

Someone can help me with this problem? Kind regards, Frank

Answer 1

Why do you want to add special classes for this? You can use the hide() and show() function for clicks and the mouseOver() and mouseOut() functions for the mouse hover.

Check this out for more

Edit: For some reason I cannot load jquery.com to point out the right pages

Answer 2

Using attr() and classes a lot is pretty slow, since a DOM reflow is issued each time. Also, make sure to cache elements. We can speed things up a bit doing this:

$(function(){
    var menu = $('#menu'),
        arrow = $('#arrow'),
        isOpen = false;

    arrow.hover(function(){
        if(isOpen) return;

        if(menu.is(':visible'))
            menu.hide();
        else
            menu.show();
    });
    arrow.click(function(){
        if(isOpen)
            menu.hide();
        else
            menu.show();

        isOpen = !isOpen; // shift bool
    });
});