Как закрыть окно поиска при клике вне окна

Question

при клике на иконку открывается блок поиска пытаюсь добавить функцию на закрытие этого блока

let openSearchForm = function () {
  $(document).on('click', '.search__icon-search', function () {
    $(this).parent().addClass('search--open');
  });
};

openSearchForm();

Answer 1

Как закрыть окно поиска при клике вне окна

Такое сделать можно, например, вот так...

let openSearchForm = function() {
  $(document).on('click', '.search__icon-search', function() {
    $(this).parent().addClass('search--open');
    $(document).on('click', test)
  });
};
openSearchForm();

$('#search').on('click', '.go', _ => {
  // поисковые действия 
  hide()
})
// сокрытие поиска при клике вне окна
function test(e) {
  if (e.target.closest('#search')) return
  hide()
}
// сокрытие поиска
function hide() {
    $('#search').removeClass('search--open');
    $(document).off('click', test)
}

html,
body {
  height: 100%;
}
#search {
  width: 200px;
  padding: 10px;
  border: 1px solid;
  & .content {
    display: none;
  }
  &.search--open .content {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id='search'>
  <button class='search__icon-search'>Тест</button>
  <div class='content'>
    <legend>
      <span>Что искать</span>
      <input />
    </legend>
    <button class='go'>Искать</button>
  </div>
</div>

БЛОГ НА HUSL

Как закрыть окно поиска при клике вне окна

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