О обработчике событий и вложенном меню.
Доброго дня. Сейчас разбираюсь с событиями и у меня много вопросов. Статьи читал, извиняюсь, если буду тупить.
Вот, почему это меню не работает как надо? Вроде же перебираю обьект события, пока не попаду на ли
target = e.target;
while(target.tagName != 'LI') {
target = target.parentNode;
}
И от этого оттлакиваюсь. Но все равно фигня. Такая вроде простенькая задача, но задолбался уже...
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My menu</title>
<style>
.menu-full {
background-color: #f3f;
padding:0;
margin: 0;
}
.menu-block {
background-color: #f9f;
padding:0;
margin: 0;
}
.menu-subList {
background-color: #f99;
padding:0;
margin: 0;
display: none;
}
.subSubMenu {
background-color: #f88;
padding:0;
margin: 0;
display: none;
}
</style>
</head>
<body>
<div id='menu'>
<ul class='menu-full'>
<li class='menu-block'> Меню 111
<ul class='menu-subList'>
<li><a href='#1'>Первый в списке</a>
<ul class='subSubMenu'>
<li><a href='#1'>dssdssd</a></li>
<li><a href='#1'>dsdsdssdds</a></li>
<li><a href='#1'>sddsdssdsdsds</a></li>
</ul>
</li>
<li><a href='#2'>Второй в списке</a></li>
<li><a href='#3'>Третий в списке</a></li>
<li><a href='#4'>Четвертый в списке</a></li>
</ul>
</li>
</ul>
</div>
</body>
<script type='text/javascript'>
var doc = document.getElementsByClassName('menu-full')[0];
var block = doc.getElementsByClassName('menu-block')[0];
var sub = block.getElementsByClassName('menu-subList')[0];
document.onmousemove = function(e) {console.log(e.target.tagName)}
doc.onmouseover = function(e){
target = e.target;
while(target.tagName != 'LI') {
target = target.parentNode;
}
target.getElementsByTagName('UL')[0].style.display = 'block'
clearTimeout(target.g)
}
doc.onmouseout = function(e){
var li, ul;
target = e.target
while(target.tagName != 'LI') {
target = target.parentNode
li = target;
}
ul = li.getElementsByTagName('UL')[0]
console.log(ul.innerHTML)
ul.g = setTimeout(function(){target.style.display = 'none'}, 1100)
}
</script>
</html>
|