jquery - 下拉菜单 切换关闭

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

我会将切换更改为 toggleClass 并在您的 CSS 中添加一个活动或开放类。如果您使用 JQuery UI，也可以使用动画。例如

.menu {
display:none;
}

.menu.active {
display:block;
}

然后

$('.header').click(function(e) {
  $('.menu').toggleClass("active", 1000);
  if (!$('body').hasClass("menu-active")) {
    $('body').addClass("menu-active");
  }
});

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

Answer 2

如何添加：

$('.header').click(function(e) {
  e.stopPropagation();
  $('.menu').toggle();
});
$('body').click(function() {
  $('.menu').hide();
});

jsFiddle 示例。