function main()
{
workMenu("leftVerticalMenu");
}
function log(obj)
{
console.log(obj);
}
function workMenu(id)
{
var menuContainer=document.getElementById(id).children[0];
closeListsNodes(menuContainer);
}
function closeListsNodes(container)
{
var object = container.getElementsByTagName("li");
for(var i = 0;i < object.length;i++)
{
var need = object[i].getElementsByTagName("ul");
for (var j = 0;j < need.length;j++)
{
need[j].style.display = "none";
need[j].id = i.toString() + j.toString();
need[j].onclick = function() {hideshow(need[j].id);};
}
}
}
function hideshow(id){
var need = document.getElementById(id);
if(need.style.display=='none'){
need.style.display='block';
}else{
need.style.display='none';
}
}
<!DOCTYPE html>
<html>
<head>
<title>Start Page</title>
<script src="engine.js" type="text/javascript"></script>
</head>
<body onload="main();">
<div id="leftVerticalMenu">
<ul>
<li>
<a href="#">item 1</a>
<ul>
<li>
<a href="#">item 11</a>
<ul>
<li>
<a href="#">item 111</a>
</li>
<li>
<a href="#">item 112</a>
</li>
</ul>
</li>
<li>
<a href="#">item 12</a>
</li>
</ul>
</li>
<li>
<a href="#">item 2</a>
<ul>
<li>
<a href="#">item 21</a>
</li>
<li>
<a href="#">item 22</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Тут я назначил обработчики в цикле, но они не добавляются в код html.