Событие mouseout при наведении мыши на пункт меню
Делаю обычное выпадающее меню. При наведении мыши на заголовок меню оно выпадает, при onmouseout убирается.
Проблема в том, что onmouseout возникает при перемещении курсора мыши по меню, когда курсор наводится на ссылку - пункт меню. По идее, после mouseout на диве(выпавшем меню), должно возникнуть mouseover на ссылке и так как у ссылки нет своего обработчика события mouseover, событие должно всплыть до дива и меню при этом должно остаться на своем месте(ну или в крайнем случае мигнуть, как бывает в таких случаях). Но меню исчезает.
<html>
<head>
<style>
div.menu ul {padding-top:0; float:right;}
div.menu ul li {float:left; list-style:none; font-weight:bold; padding-right:15px; }
div.menu ul li div.fall { visibility:hidden; background-color:#4682B4; }
</style>
<title>Введение в DOM</title>
<script src="jquery-1.3.2.js"></script>
<script>
$(document).ready(function() {
var titles = $("div.menu ul li #tab a");
menuDiv = '';
for (var i = 0; i < titles.length; i++) {
var title = titles[i];
title.onmouseover = function(e) {
if (menuDiv != '') menuDiv.style.visibility = "hidden";
var e = e || window.event;
var t = e.target || e.srcElement;
menuDiv = navigator.appName == 'Microsoft Internet Explorer'
? t.parentNode.parentNode.childNodes[1] : t.parentNode.parentNode.childNodes[2];
menuDiv.style.visibility = "visible";
menuDiv.onmouseout = function(e) {
menuDiv.style.visibility = "hidden";
}
};
}
});
</script>
</head>
<body>
<div class="menu">
<ul>
<li class="current"><div id="tab">Главная</div>
<div class="fall">
<a href="">item 1</a>
<a href="">item 2</a>
<a href="">item 3</a>
</div>
</li>
<li><div id="tab"><a href="/chords/about/">Ноты</a></div>
<div class="fall">
<a href="">item 1</a>
<a href="">item 2</a>
<a href="">item 3</a>
</div>
</li>
<li><div id="tab"><a href="/chords/tab/">Табулатуры</a></div>
<div class="fall">
<a href="">item 1</a>
<a href="">item 2</a>
<a href="">item 3</a>
</div>
</li>
<li><div id="tab"><a href="/chords/services/">Доска обьявлений</a></div>
<div class="fall">
<a href="">item 1</a>
<a href="">item 2</a>
<a href="">item 3</a>
</div>
</li>
<li><div id="tab"><a href="/chords/feedbacks/">Контакты</a></div>
<div class="fall">
<a href="">item 1</a>
<a href="">item 2</a>
<a href="">item 3</a>
</div>
</li>
</ul>
</div>
</body>
</html>
|
в общем-то у меня работает, только в ff можно не успеть перевести курсор на подменю - нужна задержка
кроме того, почему onmouseover ставится на ссылку, а не на весь div? Пользователю будет проще попасть по div'у почему onmouseout назначается только после появления подменю?
menuDiv = navigator.appName == 'Microsoft Internet Explorer'
? t.parentNode.parentNode.childNodes[1] : t.parentNode.parentNode.childNodes[2];
откуда такой ... код?
t.parentNode.parentNode.getElementsByTagName('div')[1]
var el = <получение ссылки на DOM-объект>;
el.on... = function() {
...el...
}
это очень распространенный способ добиться memory leak'ов. Лучше уж хранить ссылку на div в самом DOM-элементе (this.menuDiv = ...) лучше не использовать глобальные переменные (menuDiv) переменная title тоже может приводить к memory leak'ам (не уверен), я бы сделал как-то так
$(".level1 a").each( function(
this.onmouseover = ...
) {});
нельзя двум и более элементам задавать один и тот же id |
Цитата:
Цитата:
$(document).ready(function() {
var titles = $("div.menu ul li #tab a");
for (var i = 0; i < titles.length; i++) {
var title = titles[i];
title.onmouseover = function(e) {
var submenus = $("div.menu ul li div.fall");
for (var j = 0; j < submenus.length; j++) {
if (submenus[j].style.visibility == "visible")
submenus[j].style.visibility == "hidden";
}
var e = e || window.event;
var t = e.target || e.srcElement;
menuDiv = t.parentNode.parentNode.getElementsByTagName('div')[1];
menuDiv.style.visibility = "visible";
menuDiv.onmouseout = function(e) {
menuDiv.style.visibility = "hidden";
}
};
}
});
но первый вариант лучше по производительности, потому что выделенное подменю я храню в переменной между вызовами функции, вместо того, чтобы каждый раз искать его заново.Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 10:43. |