关闭身体上的动画单击

Question

当我按下body时，如何关闭动画，而不是使动画出现/消失的元素？

$('#btt').click(function() {
  $('.box').slideToggle('slow');
});

.box {
  width: 200px;
  height: 300px;
  background-color: #00000025;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btt">PressIt</button>
<div class="box"></div>

https://jsfiddle.net/c7wt9jz6/17/

Answer 1

您需要做两件事：

1. 点击slideUp()时使用body
2. 当您单击.box元素时，停止传播click事件，以便使用body模拟e.stopPropagation();点击

   $('#btt').click(function(e) {
     $('.box').slideToggle('slow');
     e.stopPropagation();
   });
   $('body').click(function(){
     $('.box').slideUp();
   });

   .box {
     width: 200px;
     height: 300px;
     background-color: #00000025;
     display: none;
   }

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <button id="btt">PressIt</button>
   <div class="box"></div>