javascript - Jquery 菜单在点击时滑入

Question

我的菜单有点问题。

情况是这样的:

 $(document).ready(function (){
  $('.btn').click(function (){
    $('.div1').fadeIn();
  });
})

<button class="btn">Menu</button>
<div class="div1">some content</div>

这就是我目前所拥有的。所以，我点击按钮时，div 淡入。但是，我无法进行下一步。我现在希望这个“div1”在点击页面上的其他任何地方时淡出，而不是在那个 div 和按钮上。

例子:我单击“btn”，“div1”出现在屏幕上，然后我将鼠标移到“div1”区域之外并单击页面上的任何其他位置，然后“div1”淡出(隐藏)。

有人可以帮我吗？

谢谢

Answer 1

检查点击事件目标。

$(document).click(function (event) {
    if (!$(event.target).hasClass('.btn') && !$(event.target).hasClass('.div1')) {
        $('.div1').fadeOut();
    }
});