Закрыть форму поиска по клику в не его?

Question

[Сергей]

Помогите пожалуйста со скриптом закрыть поиск мимо его divа

$('.header-search-wrapper .search-main').click(function(){
    $('.search-form-main').toggleClass('active-search');
    $('.search-form-main .search-field').focus();

<div class="header-search-wrapper">
  <span class="search-main">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-form-main clearfix">
<form role="search" method="get" class="search-form" action="' . home_url( '/' ) . '" >
 <label>
<input type="text" value="' . get_search_query() . '" name="s" class="search-field" id="s" placeholder="Поиск" />
 <input type="hidden" name="post_type" value="product" class="search-submit" >
</label>

 </form>
<div class="result-search">
		
<div class="result-search-list"></div>
</div>
 </div>
</div></code lang="html">

Comments

[Daniil]

Не совсем понятно что и как нужно сделать. Можете показать пример или описать по подробнее

[Сергей]

Нажимаем на иконку поиска. открывается окно ввода. Если я передумал что то вводить, нужно его закрыть кликом в любое место экрана, а не опять на иконку.

Answer 1

[Stalker_RED]

$(window).on('click', function(evt) { // слушаем все клики
  if (!evt.target.closest('.search-wrapper')) { // если клик не внутри .search-wrapper
    $('.search-wrapper').hide(); // скрываем
  }
});

Comments

[Сергей]

не работает(

[Stalker_RED]

Сергей, работает

[Сергей]

$(window).on('click', function(evt) { // слушаем все клики
  if (!evt.target.closest('.header-search-wrapper .search-main')) { // если клик не внутри .header-search-wrapper .search-main
    $('.search-form-main').toggleClass('active-search');
  }
});

Вот так должно быть в моем случае!

[Stalker_RED]

Сергей, молодец!