Закрыть анимацию при нажатии на тело

Question

Как я могу закрыть анимацию, когда нажимаю на тело, а не на элемент, который заставляет анимацию появляться / исчезать?

$('#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. Прекратите распространение события click, когда вы щелкнете элемент .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>