HTML + jQuery dropdown: When any other part of the page is clicked, FadeOut?

This is probably a simple question, but essentially I'm designing an HTML dropdown.

$('#bible-trans').click(function() {
    $('#bible-translation-list').fadeToggle('fast');
});

Where #bible-trans is the main dropdown button, the content of the dropdown is #bible-translation-list. So when I hit the main dropdown, the content toggles. Simple.

What I'd like to do is if the user hits anywhere ELSE on the page the dropdown fades out.

$("*").not('#bible-trans开发者_如何学Python').click(function() {
    $('#bible-translation-list').fadeOut();
});

This is what I have right now, but I'm pretty sure it's incorrect—well it obviously is because it doesn't work— when I click to toggle #bible-trans, it toggles and then fades away immediately. Am I using the not() selector correctly?

EDIT: I think this has a lot to do with the fact that #bible-trans is a child of * (obviously). Any way that i can work through that?

Heres one way possible of doing it

http://jsfiddle.net/76gUj/29/

$(function(){
    $(document).click(function() {
       if($("#anotherDiv").is(":visible")){
           $("#anotherDiv").fadeOut();
       }
     });

   $("#testdiv").click(function(){
       $("#anotherDiv").fadeIn('fast');
       event.stopPropagation();
    });
});

Another example by mu is too short

http://jsfiddle.net/ambiguous/76gUj/32/

If you're sure that the user will be clicking on the bible-trans dropdown, you could bind the "blur" event to it.

$('#bible-trans').blur(function() {
    $('#bible-translation-list').fadeOut();
});

This depends on the dropdown being focused at some point.