Содержание
Сегодня мы научимся создавать замечательный блок с неким содержимым, который будет показываться по клику на ссылке и скрываться по клику в любой области страницы. Мне кажется, что это очень удобный инструмент и он будет полезен многим веб-разработчикам. Итак, приступим.
Как я уже говорил, сейчас мы напишем скрипт для блока, который можно будет скрыть по клику за его пределами. Для начала создадим обычную html разметку:
Наша разметка состоит из ссылки (по которой мы будем нажимать, чтобы отобразить/скрыть блок с данными — ) и блоком данных (который содержит маркированный список с цифорками —
Для лучшего визуального представления зададим некоторые стили:
Здесь мы объявили, что наш блок со списком данных имеет фиксированную ширину — 300px, рамочку — 1px solid и изначально скрыт — display:none;
Теперь перейдем к написанию нашего скрипта. Но перед этим не забываем подключить свежую библиотеку JQuery, так как скрипт будет написан именно на нем. Как подключить библиотеку можно почитать здесь. Итак, сам скрипт:
Скрипт необходимо подключать в конец страницы или после нашего блока, который необходимо скрывать. Если коротко, то скрипт делает следующее: по клику на документе (в любом месте страницы) плавно скрывает блок с классом list — при клике на блоке с классом list ничего не происходит и при клике на ссылке с классом hide — сворачивает и разворачивает блок с классом list — как раз то, что нам и нужно. Пользуйтесь!
Рассмотрим, как отловить клик вне элемента с помощью jQuery, а затем на чистом JavaScript. Это может понадобится, например, для всплывающих окон или для закрытия меню при клике за его пределами.
Клик вне элемента jQuery
Рассмотрим, как отловить клик за пределами блока
Пример: имеем блок, пусть это будет всплывающее окно .pop-up . Будем закрывать поп-ап при клике за его пределами:
Закрытие меню при клике вне его, а также по нажатию на кнопку
Рассмотрим ситуацию, когда необходимо закрывать меню при клике вне его области, а также открывать и закрывать меню по клику на кнопку.
Будем закрывать меню, если клик совершён:
- вне меню .menu
- вне его дочерних элементов .menu *
- по клику кнопки .btn
Клик вне элемента на чистом JavaScript
В данном примере мы скрываем блок при клике вне элемента с классом pop-up
Закрытие меню при клике вне его — нативный JavaScript
Как во втором примере будем закрывать меню при клике вне его области, а также открывать и закрывать меню по клику на кнопку. Но теперь уже на чистом JavaScript.
Полезные ссылки
- Шпаргалка по использованию jQuery
- Коллекция нативных JavaScript методов
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Когда бывает нужно скрыть (закрыть) элемент по клику за его пределами? Первое, что мне приходит в голову, это всплывающие (popup) окна и выпадающие (dropdown) меню. Понятное дело, что применение может быть гораздо шире.
Согласитесь, что намного удобнее закрыть всплывающее окно, кликнув за его пределами, чем тащить указатель мыши к крестику и кликать по нему. А в некоторых ситуациях крестик и вовсе использовать не удастся (выпадающие кастомные селекты или меню).
И да, как только люди с этим не шаманят! Решений в интернете полно, но оптимальными их не назовёшь. Самое часто встречающееся из них, это когда скрипт проверяет, находится ли указатель мыши над элементом или нет.
Ну вот зачем усложнять код?
Хотя на самом деле ответ действительно очевиден — разработчики не знают, что можно сделать правильнее и проще, и делают так, как могут. Давайте разберем алгоритм:
- У нас открыто всплывающее окно, меню или что-то ещё.
- Нам нужно, чтобы оно закрывалось не только на крестик (если таковой вообще имеется), но и по клику где-нибудь за его границами.
- Значит нам нужно событие «Когда произошёл клик по странице».
- В событие нужно добавить два условия «Если клик был не по нашему элементу» и «Если клик был не по дочерним элементам нашего элемента».
- Если оба условия выполняются, скрываем элемент.
Проще простого, код jQuery будет таким:
Для данного примера можно ещё добавить событие onclick , чтобы окно также закрывалось при клике на крестик.
Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.
Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.
Загрузка...
