jQuery click off element event

Question

I have a floating div that gets displayed, and I want it to be hidden when the user clicks off the div. This would be similar to the .hover() function callback when hoverin

Answer 1

If you do not want to hide the element that you will show by clicking itself:

var div_active, the_div;

the_div = $("#the-div");
div_active = false;

$("#show-the-div-button").click(function() {
  if (div_active) {
    the_div.fadeOut(function(){
      div_active = false;
    });
  } else {
    the_div.fadeIn(function(){
      div_active = true;
    });
  }
});

$("body").click(function() {
  if div_active {
    the_div.fadeOut();
    div_active = false;
  }
});

the_div.click(function() {
  return false;
});

Answer 2

example you click a link element to display div menu , you simply bind blur function to link element to hide div menu

$('a#displaymenu').click(function(){
   $("#divName").toggle();
}).blur(function() {$("#divName").hide()})

Answer 3

If you're using Jquery, you could use a selector like:

$("*:not(#myDiv)").live("click", function(){
    $("#myDiv").hide();
});