alex45 Posted August 11, 2009 Report Share Posted August 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.