jQuery удалить класс 'is-active' из div по щелчку документа, но также и по щелчку триггера

Question

У меня есть триггер значка поиска и по клику Я показываю div, но я хочу скрыть div по щелчку где-либо еще отдельно из div, а также, если div имеет класс «активный», то при нажатии на триггер он должен удалить класс «is-active». У меня есть следующий код.

$('.search-icon').parent().on('click',function() { 
if($('.search-box').is('.is-active')) { 
    $('.search-box').removeClass('is-active'); 
    $(document).mouseup(function (e) { 
    var container = $('.search-box'); 

    if (!container.is(e.target) 
    && container.has(e.target).length === 0) { 
     container.removeClass('is-active'); 
    } 
    }); 
} 
else { 
    $('.search-box').addClass('is-active'); 
} 
}); 

Проблема даже при нажатии на спусковой крючок, он проверяет, является ли «.search ящик» имеет класс «.а-активный» и удаляет его, но переходит к блоку еще вместо остановки выполнение. Как это исправить?

Answer 1

я в конечном итоге делает это таким образом

$('.web-icon-container > a > .search-icon').parent().on('click',function() { 
$('.web-icon-container').find('.search-box').toggleClass('is-active'); 

$(document).mouseup(function(e){ 
    if(!$(e.target).is('.web-icon-container > a > .search-icon') && 
    $('.web-icon-container').find('.search-box').has(e.target).length === 0){ 
    if($('.web-icon-container').find('.search-box').hasClass('is-active')) { 
     $('.web-icon-container').find('.search-box').removeClass('is-active'); 
    } 
    } 
}); 
}); 

Answer 2

Вы хотите, чтобы скрыть DIV на щелчок в любом месте и удалить класс - Используется этот код

использовано toggleClass добавить класс и удалить класс на событие щелчка

$('.search-icon').parent().on('click',function() { 
    $('.search-box').toggleClass('is-active'); 
}); 

Вы можете применить click на body документа и отменить обработку click, если событие click генерируется div с классом search-box, Это будет связать событие с одного элемента и сохранения связывания click с каждым элементом, кроме search-box

$(document).click(function(e){ 
    if(!$(e.target).is('.search-box, .search-box *')){ 
     if($(".search-box").hasClass("is-active")) 
     { 
      $('.search-box').removeClass('is-active'); 
     } 
    } 
});