javascript+XML实现的树状菜单

最新推荐文章于 2023-09-10 15:06:24 发布
最新推荐文章于 2023-09-10 15:06:24 发布
阅读量1.5k 收藏
点赞数
分类专栏： HTML 文章标签： javascript xml tree html function div

tree.htm
 <script language="JavaScript" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"></script> <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+"' οnclick=divshow('"+vid+"')>";
    img=ImgArr[level];
    readTree(nodes(i),true);
   }
   else{
    ImgArr[level]="<img src='images/T+.gif' id='f"+vid+"' οnclick=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;
}

function readTree(cI,sp)
{
 var nodes=cI.childNodes;
 var menuHTML=img;
 menuHTML+="<img src='images/";
 menuHTML+=cI.selectNodes("image")(0).text;
 menuHTML+="'>";
 menuHTML+="<a href='";
 if(cI.selectNodes("link")(0).text!=""){menuHTML+=cI.selectNodes("link")(0).text;}
 else{menuHTML+="#";}
        if(cI.selectNodes("target")(0).text!="")menuHTML+= "' target='"+cI.selectNodes("target")(0).text;
 menuHTML+="' οnclick=javascript:divshow('"+vid+"')";
 menuHTML+=" title='";
 menuHTML+=cI.selectNodes("title")(0).text;
 menuHTML+="'>";
 menuHTML+=cI.selectNodes("text")(0).text;
 menuHTML+="</a><br>/n";
 HTML+=menuHTML;
 HTML+="<div id='div"+vid+"' style='display:none'>/n";
 ImgArr[level]="<img src='images/i.gif'>";
 if(sp)ImgArr[level]="<img src='images/white.gif'>";
        for(var i=0;i<nodes.length;i++)
        {
         level++;
         ImgArr[level]="<img src='images/i.gif'>/n";
         if(sp)ImgArr[level]="<img src='images/white.gif'>/n";
         img="";
         var tempImg="";
         for(var j=0;j<level;j++)
         {
           tempImg+=ImgArr[j];
         }
         img=tempImg;
         if(nodes(i).nodeName=="tree")
  {
   vid++;
   if(i==nodes.length-1)
   {
    img+="<img src='images/L+.gif' id='f"+vid+"' οnclick=divshow('"+vid+"')>";
    readTree(nodes(i),true);
   }
   else
   {
    img+="<img src='images/T+.gif' id='f"+vid+"' οnclick=divshow('"+vid+"')>";
    readTree(nodes(i),false);
   }
   img="";
  }
  else if(nodes(i).nodeName=="node")
  {
   if(i==nodes.length-1)
   {
    img+="<img src='images/L.gif'>";
   }
   else{
    img+="<img src='images/T.gif'>";
   }
   readNode(nodes(i));
  }
  level--;
 }
 HTML+="</div>/n";
 return;
}
function readNode(cI)
{
 //alert("ok");
        var nodeHTML=img;
        nodeHTML+="<img src='images/";
        nodeHTML+=cI.selectNodes("image")(0).text;
        nodeHTML+="'>";
        nodeHTML+="<a href='";
        nodeHTML+=cI.selectNodes("link")(0).text;
        if(cI.selectNodes("target")(0).text!="")nodeHTML+= "' target='"+cI.selectNodes("target")(0).text;
        nodeHTML+="' title='";
        nodeHTML+=cI.selectNodes("title")(0).text;
        nodeHTML+="'>";
        nodeHTML+=cI.selectNodes("text")(0).text;
        nodeHTML+="</a><br>/n";
        HTML+=nodeHTML;
 return;
}
function divshow(vid)
{
 if(document.all["div"+vid].style.display=="none"){
  document.all["div"+vid].style.display="";
  document.all["f"+vid].src=document.all["f"+vid].src.replace("+","-")
 }
 else{
  document.all["div"+vid].style.display="none";
  document.all["f"+vid].src=document.all["f"+vid].src.replace("-","+")
 }
 return;
}
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 font-size: 9pt;
}
A {
 text-decoration:none;
 font-family: "宋体";
 font-size: 9pt;
 COLOR:#000000;
 }
 img{
 vertical-align: text-bottom;
 }
-->
</style>
</head>
<body bgcolor="#76b4d9" leftmargin="0" topmargin="0">
<div id=show></div>
</body>
<script>
getSubject()
</script>
</html>

 

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>

deadshot123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 树形菜单
02-12
树形菜单 树形菜单树形菜单 树形菜单树形菜单 树形菜单树形菜单 树形菜单
原生js手动实现一个多级树状菜单效果（高度可过渡变化） + 模拟el-menu组件实现（简单版）
pscool的博客
05-13 2386
效果图 代码 要点 需要注意这个dom结构， 过渡动画一定要有开始和结束值才能产生动画，并且在js里面修改的时候，不能连着修改，要把第二次修改放到setTimeout里面 为了让菜单能够不是一次性过渡（让它可以一直产生过渡动画），需要在动画结束后，清理掉设置的高度，这个设置的高度只需要在动画的时候生效。 <style lang="scss" scoped> @import url(//at.alicdn.com/t/c/font_4065865_kb7oyb2wje9.css); ul,
js树状菜单制作
m0_73481765的博客
07-02 408
这段代码为树形菜单的每个li元素添加了一个单击事件监听器。当用户单击它时，它会查找它的子菜单并将其显示或隐藏。它还为菜单项添加了一个“open”类，以便我们可以使用CSS样式控制其外观。使用JavaScript创建一个事件侦听器，以便用户单击菜单项时显示或隐藏其子菜单。首先，在HTML中创建一个带有ul和li标记的基本树形结构。现在，我们已经创建了一个简单的可展开/折叠的树形菜单！添加CSS样式以控制树形菜单的外观和布局。
js的递归函数——实现可收放的树形菜单
杜永康的博客
03-28 1827
树形菜单是一种常见的网站导航方式，它通常由多个层级的菜单项组成，每个菜单项可以有子菜单项。在JavaScript中，我们可以使用递归函数来实现树形菜单。树形菜单就是这样的东西，点击上一级，显示下一级，无限循环，一直逐层显示下一级。再次点击，关闭下一级。长的很像树，故名树形菜单。学会这个东西，是不是很酷？接下来，我们可以定义一个递归函数来遍历这个数据源，并且为每个菜单项添加点击事件。});
js树形菜单 如何用递归制作一个简单的树形菜单
最新发布
Z_B_L的博客
09-10 500
树形菜单不仅美观、用户使用便捷，且灵活性高、层级关系可视化，对于刚学习js的同志来说是一个非常好的递归函数学习案例。本文演示一个非常简单的树形菜单，不仅简洁，而且样式可塑性高，欢迎萌新前来学习和交流。直到找不到子元素为止，最后将末尾div补全（PS：怕新手不知道，上图的”let item of data“中的item 类似于for循环的变量 i ）。函数内的字符数按模板为渲染的html结构，先拼前半段，中间利用递归原理将子元素+=进”str“里，就可以实现来回伸缩的样子啦，萌新们赶快去试一逝吧>w
javascript+xml树形菜单
01-10
JavaScript 和 XML 结合实现的树形菜单是一种常见的前端交互设计，尤其在早期的网页开发中较为流行。在本文中，我们将深入探讨如何使用 JavaScript 解析 XML 文件并构建一个仅适用于 Internet Explorer 的树形菜单。...
javascript+xml无线级树形菜单
05-11
本知识点将深入探讨如何利用 JavaScript 和 XML 来实现这种无限级树形菜单。 一、JavaScript 简介 JavaScript 是一种广泛使用的客户端脚本语言，它运行在用户的浏览器上，为网页添加动态功能和交互性。通过 ...
JavaScript+XML实现垂直树形导航菜单
01-21
全部代码来源于我近期的一个项目，客户要求论坛必须有侧边导航栏，我于是想到用框架来实现。"mainFrame"是主显框架的ID及name属性。读者可灵活修改。（作者注[2011年6月14日]：这是我三年前写的代码，代码质量比较差...
SpringMVC+ZTree实现树形菜单权限配置的方法
08-28
"SpringMVC+ZTree实现树形菜单权限配置的方法" 在本文中，我们将介绍如何使用SpringMVC和ZTree来实现树形菜单权限配置。这种方法可以在开源项目中加入权限配置的功能，并使用ZTree来实现树形结构。 首先，让我们...
Jsp+XML树状菜单类库
05-07
`JspTree`是专为JSP设计的一个高效且易于使用的树形菜单库，它利用XML作为数据源，能够方便地构建和展示动态的、交互式的树状结构。本文将详细介绍`JspTree`类库的原理、使用方法以及其优势。 ### 1. `JspTree`核心...
js+html+xml树型结构非常棒
03-25
js+html+xml树型结构非常棒,<br>适用于各种web语言.大家可以下了试试！很爽的
JS无限级树形菜单
08-27
JS无限级树形菜单3种
JavaScript实现简单的树形菜单效果
10-19
主要为大家详细介绍了JavaScript实现简单的树形菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自己写的JS三层树形菜单，内容基于xml
03-25
自己写的JS三层树形菜单，内容完全基于读取xml，可修改xml来达到修改菜单的目的。贵在真实啊，呵呵
JS实现树形菜单
柚稚的博客
07-07 3607
需求 用JS实现树形结构，原本的数据是数组类型，需要先把数据进行处理，然后在页面上渲染DOM，注意点有以下几点： 1、data必须含有id和fatherId来表示他们的层级关系 2、js动态创建DOM的实现方式是先创建一个div，然后把生成的元素appendChild给这个div 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-eq
JS制作树形菜单
qq_62881798的博客
03-07 694
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=g.
js各种树形菜单
shrimpma的专栏
05-01 439
http://www.open-open.com/ajax/Tree.htm
JS 案例 树形菜单
suiferq的博客
05-14 1605
制作树形菜单 需求说明 使用项目列表制作一个完整的树形菜单，可通过单击一级菜单来显示和隐藏二级菜单，完成效果如图所示： 使用带参数的函数，通过参数来控制显示或隐藏某个列表。 HTML代码片： <div class="menu"> <ul id="menu"> <li class="menuList"> 职能部门 <ul> <li>学工部</li> <li>后勤&l
使用Ext JS实现无限级树形菜单的数据转换方法
"这篇文档主要讨论了如何使用JavaScript实现无限级树形菜单，特别是通过Ext JS框架。在Web开发中，树形控件是展示层次结构数据的有效工具，常见于AJAX技术驱动的界面中。文章提及了各种JavaScript库如JQuery、Dojo等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值