0

Есть кнопка:

<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>

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

2 ответа 2

1

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

$('.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>

0

Повесьте на 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");
        });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.