#jquery
#jquery
Вопрос:
У меня есть панель навигации, на которой при наведении курсора на элемент отображается следующий список. Но когда моя мышь покидает исходную навигацию, список исчезает. Я хочу, чтобы список оставался, когда он заполняется. Не могли бы вы, пожалуйста, помочь?
Комментарии:
1. как долго вы хотите, чтобы это оставалось?
Ответ №1:
Поскольку ваш обработчик событий привязан к вашему li.drop элементу, вам необходимо инкапсулировать дочернее меню в этот элемент следующим образом…
<li class="drop">
<a href="#">Recruiter Tools</a>
<div class="recToolbardrop" style="display:none;">
<ul class="recToolbardrop">
<li><a href="#">Featured Tools</a></li>
<li><a href="#">All Tools</a></li>
</ul>
</div>
</li>
Ответ №2:
Просто удалите вторую функцию из вашего jQuery. Это должно отображаться…
$(document).ready(function () {
$('li.drop').mouseenter(function () {
$('div.recToolbardrop').slideDown('fast');
});
});
Комментарии:
1. «Я хочу, чтобы список оставался при наведении на него курсора», похоже, подразумевает, что он хочет, чтобы он снова исчез, когда он не наводит на него курсор.
Ответ №3:
http://jsfiddle.net/daybreaker/fgtrR/
Поместите ul.recToolbardrop внутрь li.drop , чтобы li.drop инкапсулировать его.
Он зависает, потому что вы больше не зависаете li.drop технически, потому что вы отображаете совершенно новый div под ним. Если вы вставите ul.recToolbardrop в li.drop , вы не уйдете li.drop при наведении курсора мыши на любой из новых li элементов.
Кроме того, для справки, есть несколько чисто CSS-примеров того, как это сделать, если вы специально не пытаетесь поддерживать старые браузеры, которые не распознают :hover все CSS-теги.
Ответ №4:
добавьте событие mouseleave в div.rectoolbarddrop, а не в li.drop