Убрать класс по клику вне объекта

Question

столкнулся с такой проблемой, есть анимация burger, где добавляется класс active. Нужно убрать данный класс по клику вне объекта, ниже прикрепил код:

  var toggle = false,
    trigger = $('.menu-burger'),
    target = $('.burger');
    trigger.click(function() {
        if (!toggle) {
            target.addClass('active');
            toggle = true;
        } else {
            target.removeClass('active');
            toggle = false;
        }
    });

.header__headings {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  height: 12px;
  cursor: pointer;
  z-index: 2;
  padding-right: 0;
  padding: 10px;
}

.header__headings:hover .burger {
  background: transparent;
}

.header__headings:hover .burger:before,
.header__headings:hover .burger:after {
  background: #E7606B;
}

.header__headings:hover .title {
  color: #E7606B;
}

.header__headings .burger {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 25px;
  background: transparent;
  margin: auto;
  display: block;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.header__headings .burger::before,
.header__headings .burger::after {
  position: absolute;
  background: #094183;
  top: 0;
  left: 0px;
  content: "";
  height: 2px;
  width: 100%;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.header__headings .burger:hover .header__headings .burger::after {
  position: absolute;
  background: #E7606B;
  top: 0;
  left: 0px;
  content: "";
  height: 2px;
  width: 100%;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.header__headings .burger::before {
  top: -4px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.header__headings .burger::after {
  top: 4px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.header__headings .burger.active {
  background: transparent;
  -webkit-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.header__headings .burger.active::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.header__headings .burger.active::after {
  top: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.header__headings .title {
  font-size: 16px;
  font-size: 1rem;
  font-weight: normal;
  font-style: normal;
  color: #094183;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  display: block;
  margin-left: 15px;
}

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

<div class="menu-burger">
                <div class="header__headings">
                    <span class="burger"></span>
                    <span class="title"></span>
                </div>
            </div>

Answer 1

Обычно использую вот такой код:

$('.block').on('click', function(){
  $(this).toggleClass('-active');
});

$(document).on('mouseup', function(e){ // При нажатии на документ
  let s = $('.block.-active'); // берём .block.-active
  if(!s.is(e.target) && s.has(e.target).length === 0) {
    // Если нажат не он и не его дочернии И сам он существует
    s.removeClass('-active'); // То удаляем у него класс .active
  }
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin: 0;
}

.block {
  display: block;
  width: 60px;
  height: 60px;
  background: gray;
}

.block.-active {
  border-radius: 50%;
  background: green;
}

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

<div class="block -active"></div>

Answer 2

Могу предложить решение на JS. На body повесить событие клика при котором удаляется класс 'active'. В вашем случае body слишком маленький, поэтому я повесил событие на window, что бы работало при клике в любой точке браузера. После этого блоку '.menu-burger' остановить всплытие при помощи stopPropagation(), что бы клик на этот блок также не отрабатывал на window.

`window.addEventListener('click', function(e){
    target.removeClass('active');
 });
 var triggerJs = document.querySelector('.menu-burger');
 triggerJs.addEventListener('click', function(e){
    e.stopPropagation();
 });`

БЛОГ НА HUSL

Убрать класс по клику вне объекта

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