Выпадающее меню Toggle Закрыть

Question

У меня есть простое выпадающее меню, которое прекрасно работает, но есть ли способ, чтобы, щелкнув где-нибудь, но ul, он снова переключит его?

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

Как насчет добавления:

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

jsFiddle example.

Answer 2

Я бы переключил toggle на toggleClass и добавил активный или открытый класс в ваш css. Вы также можете использовать анимацию, если используете пользовательский интерфейс JQuery. например

.menu { 
display:none; 
} 

.menu.active { 
display:block; 
} 

затем

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

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