Скрыть элемент при клике за его пределами / 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>). Выглядит это примерно так:
Для лучшего визуального представления зададим некоторые стили:
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>