Скрыть элемент при клике за его пределами / JQuery

Скрыть элемент при клике за его пределами / JQuery

Сегодня мы научимся создавать замечательный блок с неким содержимым, который будет показываться по клику на ссылке и скрываться по клику в любой области страницы. Мне кажется, что это очень удобный инструмент и он будет полезен многим веб-разработчикам. Итак, приступим.

Как я уже говорил, сейчас мы напишем скрипт для блока, который можно будет скрыть по клику за его пределами. Для начала создадим обычную html разметку:

<a href="" class="hide">Показать список</a>
<div class="list">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>

Наша разметка состоит из ссылки (по которой мы будем нажимать, чтобы отобразить/скрыть блок с данными - <a href="" class="hide"></a>) и блоком данных (который содержит маркированный список с цифорками - <div class="list"></div>). Выглядит это примерно так:

Скрыть элемент при клике за его пределами / JQuery

Для лучшего визуального представления зададим некоторые стили:

div {
	display:none;
	border:1px solid;
	width:300px;
}

Здесь мы объявили, что наш блок со списком данных имеет фиксированную ширину - 300px, рамочку - 1px solid и изначально скрыт - display:none;

Теперь перейдем к написанию нашего скрипта. Но перед этим не забываем подключить свежую библиотеку JQuery, так как скрипт будет написан именно на нем. Как подключить библиотеку можно почитать здесь. Итак, сам скрипт:

$(document).click( function(event){
	if( $(event.target).closest(".list").length ) 
	return;
	$(".list").slideUp("slow");
	event.stopPropagation();
});
$('.hide').click( function() {
		$(this).siblings(".list").slideToggle("slow");
		return false;
	});

Скрипт необходимо подключать в конец страницы или после нашего блока, который необходимо скрывать. Если коротко, то скрипт делает следующее: по клику на документе (в любом месте страницы) плавно скрывает блок с классом list - при клике на блоке с классом list ничего не происходит и при клике на ссылке с классом hide - сворачивает и разворачивает блок с классом list - как раз то, что нам и нужно. Пользуйтесь!

Весь код страницы целиком:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
div {
	display:none;
	border:1px solid;
	width:300px;
}
</style>
</head>
<body>
<a href="" class="hide">Показать список</a>
<div class="list">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>
<script>
$(document).click( function(event){
	if( $(event.target).closest(".list").length ) 
	return;
	$(".list").slideUp("slow");
	event.stopPropagation();
});
$('.hide').click( function() {
		$(this).siblings(".list").slideToggle("slow");
		return false;
	});
</script>
</body>
</html>

04.04.17
Для просмотра сайта обновите браузер.