下拉菜單切換關閉

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

我會改變切換到toggleClass並添加一個活躍或開放的類在您的CSS。如果您使用JQuery UI，您也可以使用動畫。例如

.menu { 
display:none; 
} 

.menu.active { 
display:block; 
} 

然後

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

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