Вы здесь

Как спрятать div при клике снаружи него

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

Небольшой кусочек кода, чтобы не потерять, как это делается:

/*
 * Открыть, закрыть при клике на элемент
 */
$('.open-settings').on('click', function() {
  $('.choose-settings').toggle();
});
 
/*
 * При клике на документ
 */
$(document).mouseup(function(e){
  var container = $(".choose-settings");
 
  /* 
   * Если кликнутый элемент содержится не в данном контейнере и кликнутый элемент - это
   * не кнопка открытия меню, то скрываем контейнер
   */
  if (!container.is(e.target) && container.has(e.target).length === 0 
      && !$(e.target).hasClass('open-settings')){
    container.hide();
  }
});

 

Тэги: 
Поделиться:

Комментарии

На сегодняшний день это наиболее завешенное решение, которое нашел в Сети.
Работает без сбоев! Только что проверил.
Пусть банально, но СПАСИБО автору!

Оставить комментарий