javascript的樹形目錄
2012-1-30 11:19 Monday  

分类: HTML 评论(83) 浏览(26674)

<body>
      页面代码:
<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>
<script language=javascript>
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';
}
}
</script>
</body>

+1 11

留下你的看法: