Cómo cerrar el cuadro desplegable con Jquery al hacer clic fuera

Así que tengo este cuadro desplegable, me gustaría cerrarlo al hacer clic fuera de él, ¿cómo puedo obtenerlo?

$(document).ready(function(){ jQuery('ul.nav li.dropdown').click(function() { jQuery(this).find('.dropdown-menu').fadeIn(); $("#actionStatus").html(""); }); $("body:not(ul.nav li.dropdown)").hover(function(){ $("ul.nav li.dropdown").find('.dropdown-menu').fadeOut(); }); $("#btnSendOption").click(function(){ var data = $("#frmUserOption").serialize(); $.ajax({ url: "/users.php", data: data, success: function( data ) { $("#actionStatus").html(""); $("input[type='radio']").attr('checked', false); $('.dropdown-menu').delay(1000).fadeOut(); }, error: function(data) { $("#actionStatus").html("
Error, try again later
"); } }); }); });

Se agradece mucho cualquier ayuda. Gracias de antemano.

Puedes usar esto:

 $("body:not(ul.nav li.dropdown)").hover(function(){ $("ul.nav li.dropdown").find('.dropdown-menu').fadeOut(); }) 

Tal vez algo como esto: (no lo probé)

 $(document).ready(function(){ $('ul.nav li.dropdown').click(function() { var $this = $(this); $("body").one("click",":not('ul.nav li.dropdown')", function(){ $this.find('.dropdown-menu').fadeOut(); }); $this.find('.dropdown-menu').fadeIn(); $("#actionStatus").html(""); }); }); 

Creé un jsbin simple para ti con un ejemplo de lo que creo que necesitas. Agregué algunos html simples como referencia solo adivinando lo que necesitabas …

http://jsbin.com/bodoxixa/1/edit?html,js,output