Close Element when clicking anywhere on page

Question

I have an element on my page that is toggled on and off by clicking on a text link. I also need the element to hide when a user clicks ANYWHERE on the page outside of the element itself - this is my jQuery code - can someone please show me what modifications to make to do what I need?

$(function() {
$("#header-translate ul li").click(function() {
    $("#header-translate li ul").toggle("slide", { direction: "up" }, 500); 
});
});

Answer 1

Using jQuery's one function is perfect for this.

$(function() {
    $("#header-translate ul li").click(function(e) {
        e.preventDefault();
        var $toClose = $("#header-translate li ul")
        $toClose.slideToggle(500, function() {
            if($toClose.is(':visible')) {
                $('body').one('click', function(e) {
                    e.preventDefault();
                    $toClose.slideUp(500);
                });
            }
            else {
                $('body').unbind('click');
            }
        });
    });
});

What this will do is assure that this click handler will only get executed once, and only when the element is shown.