Para ocultar el div al hacer clic en cualquier lugar de la página excepto el div seleccionado

 $(document).not("#selecteddiv").click(function() { $('#selecteddiv').hide(); });

si desea ocultar el div con enfoque perdido o desenfoque con animación, también

 $("#selecteddiv").focusout(function() { $('#selecteddiv').hide(); });

con animación

 $("#selecteddiv").focusout(function() { $('#selecteddiv').animate({ display:"none" }); });

Que esto te ayude

Desafortunadamente, los ejemplos ya proporcionados no funcionan si tiene un iframe en su sitio y luego hace clic dentro del iframe. Adjuntar el evento al documento solo lo adjuntará al mismo documento en el que se encuentra su elemento.

También puede adjuntarlo a cualquier iframe que esté utilizando, pero la mayoría de los navegadores no le permitirán hacerlo si el iframe ha cargado contenido de otro dominio.

La mejor manera de hacer esto es copiar lo que se hace en el complemento de la barra de menú de jQuery UI.

HTML de ejemplo básico:

 <div id="menu">Click here to show the menu <ul> <li>Item 1</li> <li>Item 2</li> <li><a href="#">Item 3</a></li> </ul> </div>

Y el jQuery necesario para que funcione:

 var timeKeeper; $('#menu').click(function() { $('#menu ul').show(); }); $('#menu ul').click(function() { clearTimeout(timeKeeper); }); $('#menu').focusout(function() { timeKeeper = setTimeout(function() {$('#menu ul').hide()}, 150); }); $('#menu').attr('tabIndex', -1); $('#menu ul').hide();

Lo que hace es darle al menú un índice de pestañas, para que se pueda considerar que tiene foco. Ahora que lo ha hecho, puede usar el controlador de eventos de enfoque en el menú. Esto se disparará cada vez que se considere que ha perdido el foco. Desafortunadamente, hacer clic en algunos elementos secundarios activará el evento de enfoque (por ejemplo, hacer clic en enlaces), por lo que debemos deshabilitar la ocultación del menú si se ha hecho clic en algún elemento secundario.

Debido a que el evento de enfoque se llama antes que el evento de clic de cualquier elemento secundario, la forma de lograrlo es establecer un pequeño tiempo de espera antes de ocultar el elemento, y luego un clic en cualquier elemento secundario debería borrar este tiempo de espera, lo que significa que el menú no obtiene oculto.

Aquí está mi ejemplo jsfiddle de trabajo

$(document).mouseup(function (e) { var container = $("YOUR CONTAINER SELECTOR"); if (!container.is(e.target)&& container.has(e.target).length === 0) { container.hide(); } });