Форум

WalterScott · #1 (**permalink**) 10.05.2009, 11:00

Делаю обычное выпадающее меню. При наведении мыши на заголовок меню оно выпадает, при 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>

x-yuri · #2 (**permalink**) 11.05.2009, 02:29

в общем-то у меня работает, только в 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

WalterScott · #3 (**permalink**) 12.05.2009, 22:05

Сообщение от x-yuri

t.parentNode.parentNode.getElementsByTagName('div' )[1]

Cпасибо, спорол горячку(я, в смысле).

Сообщение от x-yuri

лучше не использовать глобальные переменные (menuDiv)

Да, в данном случае можно обойтись без глобальной переменной:

$(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";
						}
						
					};
				}
				
			});

но первый вариант лучше по производительности, потому что выделенное подменю я храню в переменной между вызовами функции, вместо того, чтобы каждый раз искать его заново.

Сообщение от x-yuri

var el = <получение ссылки на DOM-объект>;
el.on... = function() {
...el...
}

это очень распространенный способ добиться memory leak'ов.

Ну, это может случиться в случае большого количества элементов. А у меня всего лишь обычное верхнее меню.

Сообщение от x-yuri

нельзя двум и более элементам задавать один и тот же id

Знаю, это просто небрежность с моей стороны.

Форум

Справочник

Discord чат

Курсы javascript