Question

I have a mouseover and a mouseout event on a menu, that shows/hides a drop down menu.

This drop down menu has some other menu items, and I wish to (when clicked) to remove the mouse out event on the target that showed the menu. But once another target is clicked I wish to enable this event again. I hope I explained it well.

This is the JavaScript:

$(document).ready(function () {
    $("#menu ul > li").not(".parenttocurrent").not(".current").mouseover(function () {
        $(this).find(".menu_content").stop().fadeTo('fast', 1).show();
    }).mouseout(function () {
        $(this).find(".menu_content").stop().fadeTo('fast', 0, function () {
            $(this).hide();
        });
    });
});

I need to stop that event on mouseout, if one of the items is clicked. You can see a demo here: http://arcticbusinessnetwork.com.web18.curanetserver.dk/home.aspx

Answer 1

Make the event-handler functions seperate (non-anonymous) functions and use bind to bind them and unbind to unbind them again.