Показать сообщение отдельно
  #1 (permalink)  
Старый 10.03.2011, 14:30
Новичок на форуме
Отправить личное сообщение для kudenv Посмотреть профиль Найти все сообщения от kudenv
 
Регистрация: 10.03.2011
Сообщений: 6

не работает li.onmouseout = hide (ul)
Всем фенкс кто откликнулся!
Пишу свой первый скрипт на javasript. Скрипт должен при onmouseover присвоить новый стиль (.show) атрибуту тега UL -> (вроде работает). Затем обратный момент (.hide) - не получается. console.log() - выводит className нужного тега UL.
doHide -не выполняется и не могу понять по каким признакам!
вот конструкция навигации
<div id="content" class="content">
   <ul id="menu" class="menu">
       <li><a href="#">item 1&nbsp </a></li>
       <li><a href="#">item 2&nbsp </a></li>
       <li><a href="#">item 3</a>
            <ul id="submenu" class="submenu">
                 <li><a href="#">item 3 sub 1</a></li>
                 <li><a href="#">item 3 sub 2</a></li>
            </ul>
        </li>
   </ul>
</div>


вот стайлы
ul li {list-style: none;}
   ul.menu {padding: 0; margin:0; display: block; height: 68px;}
   ul.menu > li  {float: left;  background: url("li.jpg") no-repeat top right;  height: 68px;} 
   ul.menu > li  a{display:block; padding-left: 3px; text-decoration: none; height: 68px;} 
   ul.menu > li  a:hover {display: block; background: url("a-hover.gif") repeat-x bottom left; height: 68px;} 
   ul.menu  > li > ul.submenu {display: none;}
   .show{display: block;}
   .hide{display: none;}


вот самскрипт
function Init(obj) { // смотрит если у А есть дети и среди них ul  - то это меню и передает обратно для смены className
	var obj = obj.parentNode.childNodes;
	var objLength = obj.length;
	if (objLength > 1) {
		for (var i = 0; i < objLength; i++ ) {
			if (obj[i].nodeType == 1 && obj[i].tagName == "UL" ) {
				return obj[i];
			}
		}
	} 
};

doVisible = function (event) { //определяет что target - A и передает его в Init()
	if (event.target.tagName == "A") { 
		var o = event.target;
		var oMenu = Init(o);
		if (typeof oMenu != "undefined") {
		    console.log(oMenu.className);
			oMenu.className = 'show';
		} 
	}
};
doHide = function (event) { // а вот эта не работает верне срабатывает переодически не могу понять в чем подвох
	if (event.target) {
		var ob = event.target;
		if (ob.tagName == 'UL' && ob.className == 'show') {
		console.log(ob.tagName+' doHide');}
	}
};

function doso (event) { // здесь вешаю обработчик события для отрибута  - если я все правильно понял
 document.addEventListener('mouseover',doVisible,false);
 document.addEventListener('mouseout',doHide,true);
};
doso();


в итгое меню открывается но не закрывается - помогите сделать так что бы закрывалось.
Ответить с цитированием