Доброго дня всем.
Сразу оговорюсь я пока только учус, знаю немного, тренируюсь с тем что знаю.
Имею такую вот конструкцию:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 5px;
margin: 5px 0 0 0;
}
ul li {
display: inline-block;
*display: inline;
zoom:1;
vertical-align: top;
border: 1px dotted silver;
}
ul li ul li {
display: block;
}
ul li ul li ul {
background: #FFFF99;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
var menu = {
menuElement: null,
start: function(){
menu.menuElement = document.getElementById('menu');
menu.turn(menu.menuElement);
},
turn: function(obj){
var nodeElement = obj.children
if(nodeElement){
for(var i=0;i<nodeElement.length;i++){
var nodeElementName = nodeElement[i].nodeName;
/*alert('nodeElementName:'+nodeElementName);*/
if(nodeElementName == 'A' && menu.nextElementSibling(nodeElement[i])){
var element = menu.nextElementSibling(nodeElement[i]);
element.style.display = 'none';
}
menu.turn(nodeElement[i]);
}
}
},
nextElementSibling: function(obj){
for(var nextNode = obj.nextSibling;nextNode!=null;nextNode = nextNode.nextSibling){
if(nextNode.nodeType == 1 && nextNode.nodeName == 'UL'){
return nextNode;
}
menu.nextElementSibling(nextNode);
}
},
expande: function(obj){
var nodeElement = obj.children;
if(nodeElement){
for(var i=0;i<nodeElement.length;i++){
if (nodeElement[i].nodeName == 'A') {
obj = nodeElement[i];
break;
}
}
}
var element = menu.nextElementSibling(obj);
if(element){
element.style.display = 'block';
}
}
}
/*]]>*/
</script>
</head>
<body onload="menu.start()">
<div id="menu">
<ul>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 1</a>
<ul>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 1.1</a>
<ul>
<li>
<a href="#">Link 1.1.1</a>
</li>
</ul>
</li>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 1.2</a>
<ul>
<li>
<a href="#">Link 1.2.1</a>
</li>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 1.2.2</a>
<ul>
<li>
<a href="#">Link 1.2.2.1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 2</a>
</li>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 3</a>
<ul>
<li onmousemove="menu.expande(this)" onmouseout="menu.turn(this)">
<a href="#">Link 3.1</a>
<ul>
<li>
<a href="#">Link 3.1.1</a>
</li>
</ul>
</li>
<li>
<a href="#">Link 3.2</a>
</li>
<li>
<a href="#">Link 3.3</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Все вроде работает так как задумывалось, но:
1.При наведении на Link 1.1.1 и попытке перейти на link 1.2 все благополучно сворачивается, возможно стоит поставить setTimeout но хотелось бы узнать решение получше.
2.Беспокоит рекурсивный обход метода nextElementSibling, заканчивает рекурсию только после полного обхода, а не после возврата ноды, непонятно почему.
Буду благодарен за разъяснения, ну и общие замечания/советы как упростить или сделать гибче/ошибки на которые укажете.