Ocultar div al hacer click fuera del mismo.

[reborn]

Buenas.

Quiero cerrar un div al hacer click fuera pero tambien al hacer click en el mismo elemento q lo abrio.

Es decir, tengo un enlace q abre un div:

Código HTML:

<script type="text/javascript">
$(document).ready(function() {

$("#click-a").click(function () {
  $("#open_avisos").show(0);
});


});
</script>

<a id="click-a" href="#">Avisos</a> 

<span id="open_avisos" style="display:none; position:absolute; width:200px; height:100px; background: #666"> </span> 

...entonces al hacer click en el enlace "Avisos" se abre el span con id open_avisos.
Hasta ahi todo bien.

Luego si quiero cerrarlo, agrego algo como esto:

Código HTML:

$("#click-a").blur(function () {
  $("#open_avisos").hide(0);
});

...pero yo quiero ocultarlo con blur y tambien con click en el mismo enlace "Avisos" y eso es q lo q no me sale.

Alguna orientacion?

Gracias.

[Naahuel]

Código Javascript:

$(document).click(function () {
  $("#open_avisos").hide();
});
 

[reborn]

Gracias, voy a probar.

[xcoltx]

Wenas... mira.. se puede hacer con fadeToggle.. pero no se en que version de jquery salio, yo uso siempre la ultima asi que no sabria decirte xD..

pero esa seria la solucion :D

Código Javascript:

<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 
    $("#click-a").bind({
          click: function() {
                $("#open_avisos").fadeToggle("fast");
                },
          blur: function() {
                $("#open_avisos").fadeOut("fast");
                }
    });
 
});
</script>
 

Código HTML:

<a id="click-a" href="#">Avisos</a> 
 
<span id="open_avisos" style="display:none; position:absolute; width:200px; height:100px; background: #666"> </span>
 

Enjoy :D

[reborn]

Gracias xcoltx :D