Если вы программируете на Javascript, вы, вероятно, сталкивались с ситуацией, когда вам нужно иметь меню, которое открывается по щелчку мыши и закрывается, когда пользователь щелкает за пределами меню. Я разработал довольно простой способ сделать именно это. Я добавляю слушатель событий в тело документа. Когда кто-то нажимает на него, мы ищем идентификатор цели события. Если он совпадает с ID div блока, то ничего не делаем. Если нет, то закрываем меню.
Содержание
Если пойти немного дальше, то неэффективно оставлять слушатель события click на всем теле, когда оно не используется. В данном случае, если меню еще не было открыто, нет причин слушать щелчок вне меню. Добавьте слушатель события в обратный вызов отображаемого div. Таким же образом, когда div снова будет скрыт, удалите слушатель событий.
Show Div Click inside the black box, nothing happens. Click outside, it disappears $('#showbox').click(function(){ $('#bigbox').show(function(){ document.body.addEventListener('click', boxCloser, false); }); }); function boxCloser(e){ if(e.target.id != 'bigbox'){ document.body.removeEventListener('click', boxCloser, false); $('#bigbox').hide(); } }
Также убедитесь, что вы включили jQuery в свой проект, поскольку некоторые из описанных выше функций используют эту библиотеку.
YouTube видео: Закрытие раздела или меню по щелчку снаружи с помощью Javascript
Вопросы и ответы по теме: “Закрытие раздела или меню по щелчку снаружи с помощью Javascript”
Как сделать выпадающий список в bootstrap?
Оберните переключатель выпадающего списка (Ваша кнопка или ссылка) и выпадающее меню внутри . dropdown или другого элемента, который объявляет position: relative; . Выпадающие списки можно запускать из элементов или , чтобы лучше соответствовать Вашим потенциальным потребностям.Сохраненная копия
Как работает Dropdown?
Данный принцип реализуется путём добавления к ссылке ( ) или кнопке ( , ) атрибута data-toggle="dropdown" и соответствующей разметки. В результате чего, при нажатии на эти элементы, выпадающее меню будет отображаться или скрываться.
Как сделать выбор из списка HTML?
Тег позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега , который устанавливает высоту списка.
Как называется выпадающее меню?
Выпадающее меню (dropdown) — элемент интерфейса, при наведении/нажатии на который появляется скрытая до этого информация. Чаще всего используется для группировки ссылок навигации по сайту.
Как сделать выпадающий список в JS?
Чтобы динамически добавить выпадающий список, вам нужно создать HTML элемент, его метка и, возможно,
ярлык. В чистом JavaScript вы можете использовать document. createElement() метод для программного создания раскрывающегося списка. Затем вы можете вызвать узел appendChild() метод или jQuery .
Как сделать кнопку с выпадающим меню?
Для вызова выпадающего меню можно использовать любой элемент, например, , или . Для создания выпадающего меню используем контейнер (например, ) и добавляем в него ссылки выпадающего меню. Оборачиваем кнопку и меню элементом , чтобы корректно задать положение выпадающего меню при помощи CSS.
