Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.08.2012, 22:56
Профессор
Отправить личное сообщение для PashPP Посмотреть профиль Найти все сообщения от PashPP
 
Регистрация: 26.07.2012
Сообщений: 281

О обработчике событий и вложенном меню.
Доброго дня. Сейчас разбираюсь с событиями и у меня много вопросов. Статьи читал, извиняюсь, если буду тупить.
Вот, почему это меню не работает как надо? Вроде же перебираю обьект события, пока не попаду на ли

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>
Ответить с цитированием
  #2 (permalink)  
Старый 30.08.2012, 23:44
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

target.g

эт что?

Сообщение от PashPP
не работает как надо
а как надо?
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #3 (permalink)  
Старый 30.08.2012, 23:55
Профессор
Отправить личное сообщение для PashPP Посмотреть профиль Найти все сообщения от PashPP
 
Регистрация: 26.07.2012
Сообщений: 281

Сообщение от nerv_
target.g
эт что?
Ну, по идеи это должно быть тоже свойство, что и ul.g = setTimeout(function(){target.style.display = 'none'}, 1100)

Слишком наркоманско. да?

Сообщение от nerv_
а как надо?
Обычное меню-слайдер. Можно было сделать проще, тут рядом даже примеры есть. Но надо именно как-то так, ткк повешаю на него еще плавность анимации.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открыть слайд (раздел) текущего пункта меню Demath Элементы интерфейса 8 18.07.2012 02:49
Подсветка выделенного элемента меню ajax-сайта crayday AJAX и COMET 0 11.05.2012 12:25
скрипт работает только на последнем пункте меню walking Элементы интерфейса 0 08.01.2012 14:56
Выпадающие меню like2dev Общие вопросы Javascript 9 21.10.2011 14:09
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36