javascript+XML实现的树状菜单

最新推荐文章于 2009-10-10 18:19:47 发布

deadshot123

最新推荐文章于 2009-10-10 18:19:47 发布

阅读量1.6k

点赞数

分类专栏： HTML 文章标签： javascript xml tree html function div

HTML 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用JavaScript和XML实现的动态树状菜单系统。该系统通过解析XML文件来构建多级下拉菜单，并利用JavaScript动态显示或隐藏子菜单。文章详细展示了如何创建节点和树形结构，以及如何通过点击事件展开或折叠子菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tree.htm
<script Language="JavaScript">
var ImgArr = new Array();
var level=0;
var vid=0;
var HTML="";
var img="";
function getSubject()
{
    var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async=false;
    xmlDoc.load("tree.xml");

    if(xmlDoc.parseError.errorCode != 0)
    {
       alert(xmlDoc.parseError.reason);
       return;
    }
    else
    {
var nodes=xmlDoc.documentElement.childNodes;
for(var i=0;i<nodes.length;i++)
{
        img="";
        if(nodes(i).nodeName=="tree")
  {
   vid++;
   if(i==nodes.length-1){
    ImgArr[level]="<img src='images/L+.gif' id='f"+vid+"' onclick=divshow('"+vid+"')>";
    img=ImgArr[level];
    readTree(nodes(i),true);
   }
   else{
    ImgArr[level]="<img src='images/T+.gif' id='f"+vid+"' onclick=divshow('"+vid+"')>";
    img=ImgArr[level];
    readTree(nodes(i),false);
   }
  }
  else if(nodes(i).nodeName=="node")
  {
   img="<img src='images/T.gif'>";
   if(i==nodes.length-1)img="<img src='images/L.gif'>";
   readNode(nodes(i));
  }
}
    }
     delete(xmlDoc);
     window.show.innerHTML=HTML;
     return;
}

tree.xml

<?xml version="1.0" encoding="gb2312"?>
<treeview>
<tree id="p1">
<text>啊啊</text>
<target>_blank</target>
<title>特殊台</title>
<link>ddd.asp</link>
<image>folder.gif</image>
<node>
   <text>并不</text>
   <target>_blank</target>
   <title>特殊台</title>
   <link>zzz.asp</link>
   <image>html.gif</image>
</node>
<tree id="p1-1">
   <text>常常</text>
   <target>_blank</target>
   <title>特殊台</title>
   <link>yyy.asp</link>
   <image>folder.gif</image>
   <node>
    <text>达到</text>
    <target>_blank</target>
    <title>特殊台</title>
    <link>bbb.asp</link>
    <image>html.gif</image>
   </node>
   <tree id="p1-1">
    <text>方法</text>
    <target>_blank</target>
    <title>特殊台</title>
    <link>hhh.asp</link>
    <image>folder.gif</image>
    <node>
     <text>各个</text>
     <target>_blank</target>
     <title>特殊台</title>
     <link>bbb.asp</link>
     <image>html.gif</image>
    </node>
    <tree id="p1-1">
     <text>合乎</text>
     <target>_blank</target>
     <title>特殊台</title>
     <link>www.asp</link>
     <image>folder.gif</image>
     <node>
      <text>经济</text>
      <target>_blank</target>
      <title>特殊台</title>
      <link>qqq.asp</link>
      <image>html.gif</image>
     </node>
     <node>
      <text>可靠</text>
      <target>_blank</target>
      <title>特殊台</title>
      <link>fff.asp</link>
      <image>html.gif</image>
     </node>
    </tree>
   </tree>
   <node>
    <text>力量</text>
    <target>_blank</target>
    <title>特殊台</title>
    <link>fff.asp</link>
    <image>html.gif</image>
   </node>
   <node>
    <text>奶奶</text>
    <target>_blank</target>
    <title>特殊台</title>
    <link>fff.asp</link>
    <image>html.gif</image>
   </node>
</tree>
</tree>
<tree id="p2">
<text>批评</text>
<target>_blank</target>
<title>特殊台</title>
<link>ooo.asp</link>
<image>folder.gif</image>
<node>
   <text>亲切</text>
   <target>_blank</target>
   <title>特殊台</title>
   <link>ccc.asp</link>
   <image>html.gif</image>
</node>
<node>
   <text>仍然</text>
   <target>_blank</target>
   <title>特殊台</title>
   <link>eee.asp</link>
   <image>html.gif</image>
</node>
</tree>
<node>
   <text>仍然</text>
   <target>_blank</target>
   <title>特殊台</title>
   <link>eee.asp</link>
   <image>html.gif</image>
</node>
<node>
   <text>仍然</text>
   <target>_blank</target>
   <title>特殊台</title>
   <link>eee.asp</link>
   <image>html.gif</image>
</node>
</treeview>