Dismiss Menu when Focus is lost, not on mouseout. jQuery

Question

I have jQuery that drops a menu down when its parent is clicked on, and dismisses it when they hover away from the menu. I am wanting to change the behavior so that it only dismisses if they click somewhere else on the page, or a different menu. Is this possible?

jQuery.fn.dropdown = function () {
    return this.each(function () {
        $('.ui-dropdown-list > li > a').click(function () {
            $(this).addClass("ui-dropdown-hover");
        });

        $("ul.ui-dropdown-list > li > a").click(function () {
            $(this).parent().find("ul").show();

            $(this).parent().hover(function () {
            }, function () {
                $(this).parent().find("ul").hide();
                $(this).find('> a').removeClass("ui-dropdown-hover");
            });
        });
    });
};

Answer 1

Try placing a click handler on your body that will dismiss the menu. The event should propogate up to the body unless it is dismissed elsewhere.

Something like this:

$("body").click(function() {
  $(".ui-dropdown-hover").removeClass(".ui-dropdown-hover");
});