Скрыть блок по клику в не его области

Question

Есть кнопка:

<a class="services">Сервисы</a>

И блок

<div class="services__block" style="display: none;"></div>

Нужно сделать так что бы, при клике по кнопке блок появлялся, при повторном клике блок появляется (toggle) этот момент получилось реализовать, но еще нужно что бы при клике вне области блока этот блок исчезал, то же получилось:

<script>
  $(".services").click(function(){
    $(".services__block").toggle(200);
    $(this).toggleClass("services-red");
  });
  $(document).mouseup(function (e) {
    var container = $(".services__block");
    var container2 = $(".services");
    if(container.has(e.target).length === 0 && container2.has(e.target).length === 0){
      container.hide();
      $(".services").removeClass("services-red");
    }
  });
</script>

Проблема в том что при клике по кнопке блок исчезает и появляется сразу, а нужно что бы он исчезал... Заранее спасибо за ответ!

Answer 1

Повесьте на document событие клика которое скрывает блок, а на событии клика по .services добавьте e.stopPropagation(), это запретит всплытие что бы не отрабатывал клик по document

        $(".services").on('click', function(e){
            $(".services__block").toggle(200);
            $(this).toggleClass("services-red");
            e.stopPropagation();
        });
        $(document).on('click', function (e) {
            var container = $(".services__block");
            container.hide();
            $(".services").removeClass("services-red");
        });

Answer 2

Надеюсь вам нужен был такой вариант:

$('.services').click(function() {
  $('.services__block').toggle(200);
  $(this).toggleClass('services-red');
  return false;
});
$(document).mouseup(function(e) {
  let el = $('.services__block'),
      el2 = $('.services');
  if(!el.is(e.target) && !el2.is(e.target) && el.has(e.target).length === 0) { // Выполняем функцию, если нажатый элемент НЕ el и НЕ el2 и данный элемент НЕ дочерний el
    el.hide(200, function(){
      el2.removeClass('services-red');
    });
  }
});

.services-red {
  color: red;
}

.services__block {
  width: 100px;
  height: 100px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a class="services">Сервисы</a>
<div class="services__block" style="display: none;"></div>

БЛОГ НА HUSL

Скрыть блок по клику в не его области

Ответы (2 шт):