下拉菜单切换关闭

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"); 
});