Menu déroulant Basculer Fermer

Question

J'ai un menu déroulant simple qui fonctionne bien, mais est-il possible de faire en sorte que si vous cliquez n'importe où mais que vous le fermiez à nouveau, il se referme?

Jquery

$('.header').click(function() { 
    $('.menu').toggle(); 
}); 

HTML

<a class="header" href="#">All</a> 
<ul class="menu"> 
    <li>All</li> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 

Answer 1

Que diriez-vous d'ajouter:

$('body').click(function() { 
    $('.menu').hide(); 
});​ 

jsFiddle example.

Answer 2

Je changerais pour toggleClass et ajouterais une classe active ou ouverte dans votre css. Vous pouvez également utiliser une animation si vous utilisez l'interface utilisateur JQuery. par exemple.

.menu { 
display:none; 
} 

.menu.active { 
display:block; 
} 

puis

$('.header').click(function(e) { 
    $('.menu').toggleClass("active", 1000); 
}); 

$('body').click(function(e) { 
    $('.menu').removeClass("active"); 
});