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

Question

[tripcollor]

Написал вот такой скрипт https://jsfiddle.net/tripcollor/L2rnLxL6/
есть кнопка по клику на которую показывается скрытый блок и по второму клику скрывается.
Как сделать чтобы при нажатии вне кнопки и самого блока, показываемый блок тоже скрывался?

Answer 1

[Павел Волынцев]

Поисковая фраза в Google "hide click outside HTML JS"

https://stackoverflow.com/questions/152975/how-do-...
https://stackoverflow.com/questions/1403615/use-jq...
https://stackoverflow.com/questions/13892375/how-t...

Относительно указанного примера:

var clickCount = 1;
$('.button').click(function(event){ // при клике по кнопке - обработать тут, но не давать обработать дальше
  event.stopPropagation();
	if(clickCount == 1){
			$(this).children('.show-block').show();
			clickCount = 2;
		}else{
			$(this).children('.show-block').hide();
			clickCount = 1;
		}
});

$('.button .show-block').click(function(event) { // при клике по блоку - вообще проигнорировать, иначе будет закрываться даже если в блок кликнуть
	event.stopPropagation();
});

$(window).click(function(event) { // при клике в любом месте страницы - закрывать блок
	$('.button .show-block').hide();
});

Comments

[tripcollor]

Спасибо!
Учу английский по ходу дела тоже) на русском запросе ничего подходящего не нашел.
Добавил в ваш код

$(window).click(function(event) { // при клике в любом месте страницы - закрывать блок
  $('.button .show-block').hide();
clickCount = 1;
});

И вообще идеально)

Answer 2

[Александр Белькевич]

$(document).mouseup(function (event) {
        if ($(".show-block").has(event.target).length === 0){
            $(".show-block").hide();
        }
    });

Comments

[tripcollor]

Я находил это решение в интернете, из за этого и обратился сюда, оно мне не полностью помогло
https://jsfiddle.net/tripcollor/L2rnLxL6/2/
При клике вне элементов сбивается счетчик и кнопка работает некорректно + хотелось бы при клике на скрываемый блок не скрывать его

Answer 3

[devstudent]

добавить

$(document).mouseup(function (e){// обрабатываем клик в любой точке 
		  if (jQuery(e.target).closest(".show-block").length > 0){ // проверка , произошел ли клик вне элемента, который надо по этому клику скрыть
		  	 return false; // клик по элементу игнорируем 
		  }
		  
		  else $(".show-block").hide(300);// клик вне элемента
       clickCount = 1;
		 });

Comments

[tripcollor]

https://jsfiddle.net/tripcollor/L2rnLxL6/1/
Теперь не работает сама кнопка клик по ней не скрывает блок
И при нажатии на сам блок хотелось бы что бы он оставался видимым