JavaScript实现树形目录式菜单

/**//**


* 功能：树形目录式菜单


* 默认隐藏子菜单，点击主菜单前图标（如：+）展开其子菜单（图标变化为—），再次点击可收起


* 调用示例：


* 增加引用：<script type="text/javascript" src="TreeMenu.js"></script>


* 页面代码：


* <div id="menu1" onclick="TreeMenu(this,'child1')">


* <img src="plus.gif" ><a href="#">菜单1</a>


* </div>


* <div id="child1" style="display:none">


* <a href="#">页面1</a><br>


* <a href="#">页面2</a>


* </div>


* <div id="menu2" onclick="TreeMenu(this,'child2')">


* <img src="plus.gif"><a href="#">菜单2</a>


* </div>


* <div id="child2" style="display:none">


* <a href="#">页面1</a><br>


* <a href="#">页面2</a>


* </div>


*


*/




function TreeMenu(node,id)




...{


var sibling = document.getElementById(id);




if (sibling.style.display == 'none')




...{


if (node.childNodes.length > 0)




...{


if (node.childNodes[0].tagName == "IMG")




...{


node.childNodes[0].src = "minus.gif"; //替换为展开时的图片


}


}




sibling.style.display = '';


}


else




...{


if (node.childNodes.length > 0)




...{


if (node.childNodes[0].tagName == "IMG")




...{


node.childNodes[0].src = "plus.gif"; //替换为收起时的图片


}


}


sibling.style.display = 'none';


}


}