下拉菜单切换关闭

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，也可以使用动画。 e.g。

.menu {
display:none;
}

.menu.active {
display:block;
}

然后

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

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