Как в javascript “закрывать” div при клике вне этого дива?

226

15 июля 2018, 00:50

При клике по некоторому элементу управления на экране появляется div c текстом подсказок. У дива есть кнопка "закрыть". Но хочется, чтобы он закрывался не только по клику на кнопку, но и вне области этого div'a. Подскажите, как это реализовать?

Answer 1

Вот красивое решение:

$(document).mouseup(function (e) {
    var container = $("YOUR CONTAINER SELECTOR");
    if (container.has(e.target).length === 0){
        container.hide();
    }
});

что означает следующее - если клик был по области, которая НЕ является нашим div'ом или не содержится в нем, то скрыть блок.

Это решает проблему, если клик был по элементу вложенному в блок (не по самому блоку). Элемент будет скрыт, только если клик по области ВНЕ div'a

Answer 2

Вот нашёл хороший ответ:

$(".button").click(function() { 
  $('.toggled_block').toggle(); 
}); 
$(document).on('click', function(e) { 
  if (!$(e.target).closest(".parent_block").length) { 
    $('.toggled_block').hide(); 
  } 
  e.stopPropagation(); 
});

.parent_block { 
  width: 200px; 
  height: 100px; 
} 
.button { 
  width: 200px; 
  height: 50px; 
  background: #00BB65; 
  border-radius: 5px; 
  overflow: hidden; 
} 
.toggled_block { 
  width: 200px; 
  height: 50px; 
  background: #fff; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
  border: 1px solid #ccc; 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="parent_block"> 
  <div class="button"></div> 
  <div class="toggled_block"></div> 
</div>

Answer 3

document.onclick = function() { 
  document.getElementById('nav').style.display = 'none' 
}

#nav { 
  float: left; 
  width: 150px; 
  background: red; 
  height: 100px; 
}

<div id="nav"></div>

В данном случае обработчик повешен на документ, а можно - на родителя.

Answer 4

Вот решение на нативном JS, которое учитывает скрытие соседнего элемента по повторному клику на сам элемент. А также скрытие по области вне самого элемента.

ES6 синтаксис

let hamburger = document.querySelector('.hamburger'); 
let menu = document.querySelector('.menu'); 
 
const toggleMenu = () => { 
  menu.classList.toggle('active'); 
} 
 
hamburger.addEventListener('click', (e) => { 
  e.stopPropagation(); 
  toggleMenu(); 
}); 
 
document.addEventListener('click', (e) => { 
  let target = e.target; 
  let its_menu = target == menu || menu.contains(target); 
  let its_hamburger = target == hamburger; 
  let menu_is_active = menu.classList.contains('active'); 
  if (!its_menu && !its_hamburger && menu_is_active) { 
    toggleMenu(); 
  } 
})

* { 
  font-family: sans-serif; 
} 
 
.page { 
  display: flex; 
} 
 
.hamburger { 
  background-color: #222; 
  width: 100px; 
  height: 100px; 
  border: 0; 
  border-radius: 50%; 
  cursor: pointer; 
} 
.hamburger .line { 
  width: 70px; 
  height: 10px; 
  margin-left: 10px; 
  background-color: #fff; 
  pointer-events: none; 
} 
.hamburger .line:not(:last-child) { 
  margin-bottom: 10px; 
} 
 
.menu { 
  display: none; 
  background-color: #222; 
  color: #fff; 
  padding: 5px 0; 
} 
.menu .item { 
  padding: 5px 15px; 
  cursor: pointer; 
} 
.menu.active { 
  display: inline-block; 
}

<div class="page"> 
  <button class="hamburger"> 
    <div class="line"></div> 
    <div class="line"></div> 
    <div class="line"></div> 
  </button> 
  <div class="menu"> 
    <div class="item">One</div> 
    <div class="item">Two</div> 
    <div class="item">Three</div> 
  </div> 
</div>

ES5 синтаксис

'use strict';
var hamburger = document.querySelector('.hamburger');
var menu = document.querySelector('.menu');
var toggleMenu = function toggleMenu() {
  menu.classList.toggle('active');
};
hamburger.addEventListener('click', function(e) {
  e.stopPropagation();
  toggleMenu();
});
document.addEventListener('click', function (e) {
  var target = e.target;
  var its_menu = target == menu || menu.contains(target);
  var its_hamburger = target == hamburger;
  var menu_is_active = menu.classList.contains('active');
  if (!its_menu && !its_hamburger && menu_is_active) {
    toggleMenu();
  }
});