alex45 Опубликовано 11 августа, 2009 Жалоба Поделиться Опубликовано 11 августа, 2009 Вот хочу написать выпадющее меню без jquery, чтоб меню не сразу скрывалось, а через промежуток времени. Хочу чтоб все выглядело так: 1)Функция search_elem, искала элементы LI, у которых присутствует узел UL, и вызывала функцию assign_event 2)Функция assign_event - эта функция должна вешать обработчик события на элементы и останавливать всплытие(вызовом функции stop_bubbling). 3)Функция stop_bubbling, думаю здесь все понятно. Вот начал писать код, и столкнулся с проблемой. Почему-то функция assign_event, вешает события не только на нужный элемент, но и на всех его потомков, я никак немогу это прекратить, всплытие получается убирать, а это нет. По идеи при наведение в моем коде на элемент имеющий потомка ul, должно появляться сообщение (alert). Но оно появляется на всех. Вот код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Menu</title><script type="text/javascript">var menu_id = "navbar";var speed_show = 50;var speed_hide = 1000;function search_elem() {var elem = document.getElementById(menu_id).getElementsByTagName("li");for(i in elem) { var list = elem[i].childNodes; //alert(elem[i].nodeName); for(a in list) { if(list[a].nodeName == "UL") { //alert(list[a].nodeName); assign_event(elem[i], list[a]); } }}}function assign_event(elem, list) {elem.onmouseover = function() { //alert(list.nodeName); //list.style.display = "block"; alert("yes"); stop_bubbling();}//elem.onmouseout = start_hide;}function stop_bubbling(event) {event = event || window.event;if (event.stopPropagation) event.stopPropagation();else event.cancelBubble = true;}onload = search_elem;</script><style type="text/css">#navbar, #navbar ul {margin: 0px;padding: 0px;list-style-type: none;}#navbar li {float: left;}#navbar a {background: #999999;color: #FFFFFF;display: block;font: 11px Verdana, Arial, Helvetica, sans-serif;text-decoration: none;padding: 5px;cursor: pointer;}#navbar a:hover { color: #E2144A;background: #CCCCCC; }/*styles for sub-navbar*/ #navbar ul {display: block;position: absolute;width: 150px;margin: 0px;padding: 0px;list-style-type: none;}#navbar ul li {float: none;}#navbar ul a {background: #666666;padding: 3px;}#navbar ul ul {margin-top: -19px;margin-left: 150px;}</style></head><body><div><ul id="navbar"> <li><a hover="#">home</a></li> <li><a hover="#">service</a><ul> <li><a href="#">php</a></li> <li><a href="#">java script</a> <ul> <li><a href="#">jQuery</a></li> <li><a href="#">asp.net</a> <ul> <li><a hover="#">web-design</a></li> <li><a hover="#">web-codding</a></li> </ul> </li> </ul> </li> <li><a href="#">jsp</a></li> <li><a href="#">xhtml</a></li></ul></li> <li><a hover="#">buy</a></li> <li><a hover="#">about us</a></li> <li><a hover="#">contacts</a></li></ul></div> Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Для публикации сообщений создайте учётную запись или авторизуйтесь
Вы должны быть пользователем, чтобы оставить комментарий
Создать учетную запись
Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!
Регистрация нового пользователяВойти
Уже есть аккаунт? Войти в систему.
Войти