在body单击时关闭动画

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. 单击body时使用slideUp()
单击
2. 元素时停止传播单击事件.box以便不使用模拟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>