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> Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.