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

Question

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

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

Answer 1

Вам надо повесить обработчик на все клики

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

БЛОГ НА HUSL

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

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