jQuery события, потеря фокуса
Задача в следующем. Например, у нас есть выпадающее меню на jquery - наводим мышкой на корневой пункт меню, выпадает снизу ещё несколько пунктов. Но надо, чтобы сворачивалось обратно, если убираем мышку и с корневого пункта и с выпавшего меню. При этом, чтобы при переносе с одного на другое, менюшка не сворачивалась.
Это просто как пример. Либо есть поле формы - начинаем туда вводить что-то и снизу появляется список строк определённых, список должен исчезать при потере фокуса у поля формы, но при этом если фокус на появившихся строках списка, то исчезать не должен.
Т.е. в первом случае нужно, чтобы hover срабатывал только при определённом условии, а во втором, чтобы при focus проверялся элемент. В принципе и то и другое уже реализовывал, но может подскажете какой-то наиболее лаконичный способ?
Это просто как пример. Либо есть поле формы - начинаем туда вводить что-то и снизу появляется список строк определённых, список должен исчезать при потере фокуса у поля формы, но при этом если фокус на появившихся строках списка, то исчезать не должен.
Т.е. в первом случае нужно, чтобы hover срабатывал только при определённом условии, а во втором, чтобы при focus проверялся элемент. В принципе и то и другое уже реализовывал, но может подскажете какой-то наиболее лаконичный способ?
1 ответов
Для первого примера достаточно правильно составленный html+css
<ul id="menu">
<li>
<a href="#">First link</a>
<ul class="submenu">
<li><a href="#">First sublink</a></li>
<li><a href="#">Second sublink</a></li>
<li><a href="#">Third sublink</a></li>
</ul>
</li>
<li>
<a href="#">Second link</a>
</li>
</ul>
.submenu {display: none}
#menu > li:hover .submenu {display:block}
- во всех современных браузерах, такая конструкция будет работать как вам нужно, в ie6 возможно придется эмулировать :hover у элемента li
По поводу второго примера, я обычно использую вспомогательную булевую(true/false) переменную в javascript.
Когда блок должен быть отображен, она true (выставляется по необходимым событиям: наведение на пункт меню, фокус в форме), и наоборот (пользователь убрал курсор и не в фокусе формы). При отслеживании события выставляющего переменную, происходит проверка с её текущим значением и в зависимости от этого изменяется отображение нужного блока. Если нужно с примером - напишите!