Событие 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, время: 05:19. |