Question

I have a button ‘button’ that activates a dropdown box ‘box’:

$('.button').click(function() 
{           
    $(this).siblings(".box").toggle();
});

Everytime the button is clicked the dropdown box hides or shows

$('.box').blur(function()
{   
    $(this).hide();
});

Now I want to implement a blur, so that when the user clicks something other than the dropdown box, the box hides itself.

BUT

Now when I click the button while the dropdown is open, it closes and reopens. I feel like I’m stuck in a Catch-22.

The problem is, is that blur and .click are both firing when I click the button while the dropdown is open.

Answer 1

Instead of using blur, look for a click anywhere on the document, but prevent bubbling up when clicking on the box or the button.

$('.button').click( function(event) {
  $(this).siblings('.box').toggle();
});
$('html').click( function() {
  $('.box').hide();
});
$('.box, .button').click( function() {
  event.stopPropagation(); 
});

http://jsfiddle.net/bLdtz/