js树形菜单代码

合集下载

js 树状结构,输入id返回当前id节点和所有子节点

js 树状结构,输入id返回当前id节点和所有子节点1.引言1.1 概述概述部分的内容：在计算机科学中，树状结构是一种重要的数据结构，它模拟了自然界中的树形关系。

树状结构由根节点、子节点和叶节点组成，通过节点之间的连线表示它们之间的关系。

在前端开发中，JavaScript语言提供了一种简洁而强大的方式来创建和操作树状结构。

通过使用JavaScript，我们可以轻松地构建一个树形的数据结构，并可以对其中的节点进行各种操作，例如增加、删除、查找等。

本文主要介绍了如何通过JavaScript实现一个树状结构的数据结构，并提供了一个根据节点ID返回当前节点及其所有子节点的功能。

通过这个功能，我们可以方便地获取到指定节点下的所有子节点，从而实现对树状结构的有效操作。

文章的结构如下：首先，我们会对树状结构的定义和特点进行详细介绍，包括了树状结构的基本概念和重要特性。

其次，我们会介绍如何使用JavaScript来实现一个树状结构的数据结构，包括树的创建、节点的增删改查等操作。

最后，我们将总结本文的内容，并讨论树状结构在前端开发中的应用前景。

通过本文的学习，读者将对JavaScript中的树状结构有更深入的理解，并能够应用这些知识来解决前端开发中的问题。

无论是构建一个复杂的网站还是开发一个交互式的应用程序，树状结构都是一个非常有用且灵活的工具，相信本文对读者会有所帮助。

敬请期待下面的内容，让我们开始吧！1.2 文章结构文章结构部分介绍了整篇文章的组织和框架。

本文分为引言、正文和结论三个部分。

下面将对每个部分进行详细介绍。

引言部分主要介绍了本文要讨论的主题——js树状结构。

首先对树状结构的概念进行了简单的概述，接着介绍了文章的结构和目的。

通过引言，读者可以对将要阐述的内容有一个整体的了解。

正文部分是本文的核心，主要分为两个小节。

首先是对树状结构的定义和特点的介绍。

文章将从何为树状结构开始，逐步深入地解释了树状结构的各个要素和特点。

jstree 方法调用

jstree 方法调用jstree 是一种基于jQuery 的树形结构插件，可以方便地创建和管理树形结构数据。

除了基本的树形展示功能，jstree 还提供了许多方法来操作和交互树形结构数据，包括添加、删除、修改节点等。

下面是一些jstree 方法调用的示例：1. 加载树形结构数据```javascript$('#tree').jstree({'core': {'data': [{ 'text': '节点1', 'state': { 'opened': true } },{ 'text': '节点2', 'children': [ { 'text': '子节点1' }, { 'text': '子节点2' } ] },{ 'text': '节点3', 'state': { 'selected': true } }]}});```2. 添加节点```javascript$('#tree').jstree('create_node', 'parent_node_id', { 'text': '新节点' });```3. 删除节点```javascript$('#tree').jstree('delete_node', 'node_id');```4. 修改节点```javascript$('#tree').jstree('rename_node', 'node_id', '新名称'); ```5. 展开节点```javascript$('#tree').jstree('open_node', 'node_id');```6. 折叠节点```javascript$('#tree').jstree('close_node', 'node_id');```7. 选择节点```javascript$('#tree').jstree('select_node', 'node_id');```8. 取消选择节点```javascript$('#tree').jstree('deselect_node', 'node_id'); ```。

JS树结构数据的遍历

JS树结构数据的遍历树结构是一种常见的数据结构，它由若干节点组成，节点之间存在一对多的关系。

在前端开发中，经常需要遍历树结构的数据来进行处理操作。

本文将介绍几种常用的树结构数据的遍历算法。

一、深度优先遍历（DFS）深度优先遍历是一种递归的遍历算法，其核心思想是先遍历子节点，再遍历父节点。

在JavaScript中，可以使用递归函数来实现深度优先遍历。

以下是一个简单的树结构数据的遍历例子：```javascriptfunction dfs(node)console.log(node.value);if (node.children)for (let child of node.children)dfs(child);}}```在上述例子中，dfs函数用来深度优先遍历树结构数据。

它首先打印当前节点的值，然后递归调用dfs函数遍历子节点。

二、广度优先遍历（BFS）广度优先遍历是一种按层次顺序遍历节点的算法，其核心思想是先遍历同一层的节点，再遍历下一层的节点。

在JavaScript中，可以使用队列来实现广度优先遍历。

以下是一个简单的树结构数据的遍历例子：```javascriptfunction bfs(root)let queue = [root];while (queue.length > 0)let node = queue.shift(;console.log(node.value);if (node.children)for (let child of node.children)queue.push(child);}}}```在上述例子中，bfs函数用来广度优先遍历树结构数据。

它使用一个队列来保存待遍历的节点，初始时将根节点加入队列，然后循环进行以下操作：从队列中取出一个节点，打印该节点的值，将该节点的子节点加入队列。

三、前序遍历、中序遍历和后序遍历（二叉树）在二叉树中，除了深度优先遍历和广度优先遍历外，还常用以下三种特殊的遍历方式：1. 前序遍历（pre-order）：先访问根节点，再依次访问左子树和右子树。

js的tree数组对象扁平化思否_JS中树形对象与数组之间的相互转换菜单树

js的tree数组对象扁平化思否_JS中树形对象与数组之间的相互转换菜单树在⼯作中经常会遇到树形结构的对象转为数组或者数组转为树形对象的需求，那么如何实现呢？1、⾸先是要将⼀个具有树形结构的数组转化为树形结构的对象// 将⼀个扁平化的对象数组，转化为树形结构// 现在有⼀个对象组成的数组，每个元素有id属性和parent_id属性，根据其id属性和parent_id属性，将其转换为树结构的对象const arr = [{id: '1',parent_id: 'root',name:'abc'},{id: '2',parent_id: 'root',name:'abc'},{id: '1-1',parent_id: '1',name:'abc'},{id: '1-2',parent_id: '1',name:'abc'},{id: '1-1-1',parent_id: '1-1',name:'abc'},{id: '1-1-2',parent_id: '1-1',name:'abc'},{id: '1-2-1',parent_id: '1-2',name:'abc'},{id: '2-1',parent_id: '2',name:'abc'},{id: '2-2',parent_id: '2',name:'abc'},{id: '2-1-1',parent_id: '2-1',name:'abc'},{id: '2-2-1',parent_id: '2-2',name:'abc'},{id: '2-2-1-1',parent_id: '2-2-1',name:'abc'},{id: '2-2-1-2',parent_id: '2-2-1',name:'abc'},{id: '2-2-1-2-1',parent_id: '2-2-1-2',name:'abc'},{id: '2-3',parent_id: '2',name:'abc'},{id: '2-3-1',parent_id: '2-3',name:'abc'},{id: '3',parent_id: 'root',name:'abc'},];// 将这样⼀个数组，变成能够以树形展⽰的对象//先将数组中的每⼀个节点放到temp对象中（创建set）//即数组中有{id: '2-3', parent_id: '2',...}这样⼀个节点，需要将他放到temp中变成 '2-3': {id: '2-3', parent_id: '2',...}这种JSON结构//直接遍历整个temp对象，通过这句代码 temp[temp[i].parent_id].children[temp[i].id] = temp[i];//将当前⼦节点与⽗节点建⽴连接。

html js树形折叠菜单实例

html js树形折叠菜单实例HTML JS Treeview 可以帮助您在网站上创建一个树形折叠菜单。

以下是一个简单的示例：HTML代码：```html<!DOCTYPE html><html><head><title>Treeview Example</title><style>ul.treeview {list-style-type: none;padding: 0;margin: 0;}ul.treeview li {padding: 5px;position: relative;}ul.treeview li.expandable:before {content: '\25B6';position: absolute;left: -10px;}ul.treeview li.collapsible:before {content: '\25BC';position: absolute;left: -10px;}ul.treeview li ul {display: none;margin-left: 20px;}</style></head><body><ul class="treeview"><li class="expandable">Item 1<ul><li>Sub-item 1</li><li>Sub-item 2</li><li>Sub-item 3</li></ul></li><li class="expandable">Item 2<ul><li>Sub-item 1</li><li>Sub-item 2</li></ul></li><li>Item 3</li></ul><script>var expandableItems = document.querySelectorAll('.expandable');for (var i = 0; i < expandableItems.length; i++) {expandableItems[i].addEventListener('click', function() {var submenu = this.querySelector('ul');if (submenu.style.display === "block") {submenu.style.display = "none";this.classList.remove('collapsible');this.classList.add('expandable');} else {submenu.style.display = "block";this.classList.remove('expandable');this.classList.add('collapsible');}});}</script></body></html>```上述示例中，我们首先在`<ul>`元素上添加了一个名为`treeview`的类。

树形菜单jsTree使用方法

树形菜单jsTree使⽤⽅法jsTree版本：3.0.4在 MVC中使⽤jsTreeModel：public class Department{public int Id { get; set; }public string Name { get; set; }public int PId { get; set; }}数据库：Controller：jsTree既可以⼀次性把所有节点都加载到客户端，也可以只加载⼀层，点击节点后再去服务端获取下层节点。

对于⼩的菜单可以⼀次性加载完，如果节点很多，可以按需加载（lazy loading）。

1、⼀次性加载完所有节点public JsonResult GetTreeData(int clickId = 0){// use databasevar db=new Salary.Models.EntityContext();/* ⼀次性加载完所有节点.* 前端只需配置 'data': {'url': '/Home/GetTreeData','dataType': 'json'* } 不⽤给服务端传值* 服务端不需写where*/var items=from item in db.Departmentselect new{id = item.Id,parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ！text = };return Json(items, JsonRequestBehavior.AllowGet);}2、按需加载节点（lazy loading）public JsonResult GetTreeData(int clickId = 0){// use databasevar db=new Salary.Models.EntityContext();/* 异步加载节点（按需）前端需提供id传给服务端：'data': function (node) {return { id: node.id };}后端要在linq中加where筛选*/var items=from item in db.Departmentwhere item.PId == clickId // 在服务端要把所有上级节点找出来select new// 匿名类可以添加需要的字段，⽐如HasChildren{id = item.Id,parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ！text = ,children = db.Department.Any(p => p.PId == item.Id) // true|false 是否有⼦项};return Json(items, JsonRequestBehavior.AllowGet);}View：<div id="jstree">@section scripts{<link href="~/Content/jstree/themes/default/style.min.css" rel="stylesheet"/><script src="~/Scripts/jstree/jstree.js"></script><script>$(document).ready(function () {$("#jstree").jstree({"core": {//'initially_open':["abc"],'data': {'url': '/Home/GetTreeData','dataType': 'json','data': function (node) { // 传给服务端点击的节点//return { id: node.id == "#" ? "0" : node.id };return { clickId: node.id };},success: function () {//alert('ok');}}}});// 展开节点$("#jstree").on("loaded.jstree", function (event, data) {// 展开所有节点//$('#jstree').jstree('open_all');// 展开指定节点//data.instance.open_node(1); // 单个节点（1 是顶层的id）data.instance.open_node([1, 10]); // 多个节点 (展开多个⼏点只有在⼀次性装载后所有节点后才可⾏） });// 所有节点都加载完后$("#jstree").on("ready.jstree", function (event, data) {//alert('all ok');data.instance.open_node(1); // 展开root节点//// 隐藏根节点 /questions/10429876/how-to-hide-root-node-from-jstree$("#1_anchor").css("visibility", "hidden");$("li#1").css("position", "relative")$("li#1").css("top", "-20px")$("li#1").css("left", "-20px")$(".jstree-last .jstree-icon").first().hide();});// 获得点击节点的id$('#jstree').on("changed.jstree", function (e, data) {console.log("The selected nodes are:");console.log(data.selected);alert('node.id is:' + data.node.id);alert('node.text is:'+data.node.text);console.log(data);// TODO: 传递给Tab//$.ajax({// 'url': 'Home/GetTreeData/',// 'data': { 'id': data.node.id }//});});});// end ready</script>根节点的⽗项是0，根节点只有⼀个，似乎显⽰出来也不好看：所以我们把它隐藏起来：PS:ready 和loaded 的区别：loaded.jstree: triggered after the root node is loaded for the first timeready.jstree : triggered after all nodes are finished loading参考：--End--。

树形菜单导航源代码

简洁的多级树形导航菜单1、xhtml部分<ul id="menuList"><li class="menubar"><a href="#" id="productsActuator" class="actuator">我的收藏夹</a><ul id="productsMenu" class="menu"><li><a href="#" id="newPhonesActuator" class="actuator">个人网站</a> <ul id="newPhonesMenu" class="submenu"><li><a href="/">网页代码库</a></li><li><a href="/">网页设计师</a></li><li><a href="/">JunChen博客</a></li> <li><a href="/andy/">毅博客</a></li></ul></li><li><a href="#" id="compareActuator" class="actuator">国外网站</a><ul id="compareMenu" class="submenu"><li><a href="/">A List Apart</a></li><li><a href="/">CSS禅意花园</a></li><li><a href="/">456 Berea Street</a></li><li><a href="/">W3C网站</a></li></ul></li></ul></li></ul>2、css部分#menuList {margin: 0px;padding: 10px 0px 10px 15px;border: 1px solid #CCC;width: 203px;background-color: #EEE;color: #000;font-family: verdana, helvetica, arial, sans-serif; }li.menubar {font-size: 12px;line-height: 1.8em;list-style: none;}.menu, .submenu {display: none;margin-left: 15px;padding: 0px;}.menu li, .submenu li {list-style: none;}#menuList a {background-color: transparent;color: #000;font-size: 12px;margin-left: 15px;text-decoration: none;}#menuList a:hover {text-decoration: underline;}3、Javascript部分if (!document.getElementById) {document.getElementById = function() { return null; } }function initializeMenu(menuId, actuatorId) {var menu = document.getElementById(menuId);var actuator = document.getElementById(actuatorId);if (menu == null || actuator == null) return;actuator.onclick = function() {var display = menu.style.display;menu.style.display = (display == "block") ? "none" : "block"; return false;}}window.onload = function() {initializeMenu("productsMenu", "productsActuator");initializeMenu("newPhonesMenu", "newPhonesActuator");initializeMenu("compareMenu", "compareActuator");}简洁的双级导航菜单1、xhtml部分源代码：<ul id="butong-nav"><li><a href="#">Home</a></li><li><a href="#">About</a><ul><li><a href="#">History</a></li><li><a href="#">Team</a></li><li><a href="#">Offices</a></li></ul></li><li><a href="#">Services</a><ul><li><a href="#">Web Design</a></li><li><a href="#">Internet Marketing</a></li><li><a href="#">Hosting</a></li><li><a href="#">Domain Names</a></li><li><a href="#">Broadband</a></li></ul></li><li><a href="#">Contact Us</a><ul><li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li><li><a href="#">USA</a></li><li><a href="#">Australia</a></li></ul></li></ul>2、css部分源代码#butong-nav, #butong-nav ul {font: normal 11px verdana;margin: 0;padding: 0;list-style: none;width: 150px;border-bottom: 1px solid #CCC;}#butong-nav li {position: relative;}#butong-nav ul {position: absolute;left: 149px;top: 0;display: none;}#butong-nav li a {display: block;text-decoration: none;color: #777;background: #fff;padding: 5px;border: 1px solid #ccc;border-bottom: 0;}#butong-nav li a:hover {text-decoration: underline;}* html #butong-nav li {float: left;height: 1%;}* html #butong-nav li a {height: 1%;}#butong-nav li:hover ul, #butong-nav li.over ul {display: block;}3、Javascript部分源代码startList = function() {if (document.all && document.getElementById) {navRoot = document.getElementById("butong-nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName == "LI") {node.onmouseover = function() {this.className += "over";}node.onmouseout = function() {this.className = this.className.replace("over", ""); }}}}}window.onload = startList;。

el-tree-v2 用法

el-tree-v2 用法ElTree-v2是一款基于Vue.js的可折叠树形控件，适用于展示和管理大量层级数据的场景。

通过将数据以树形结构展示，用户可以方便地浏览和操作层级关系。

下面是关于el-tree-v2的正确用法以及一些拓展功能：用法：1.安装el-tree-v2：在项目中引入el-tree-v2的库文件（如el-tree-v2.js或el-tree-v2.min.js）。

2.在Vue组件中使用el-tree-v2：在需要展示树形结构的组件中，引入el-tree-v2组件。

3.设置数据：将需要展示的层级数据传递给el-tree-v2组件的data属性。

4.配置树形结构：通过设置el-tree-v2组件的props来控制树形结构的展示效果，如节点图标、默认展开等。

5.处理节点操作：通过监听el-tree-v2组件的事件或自定义相关方法来处理用户对节点的操作，如展开/折叠节点、选择节点、编辑节点等。

拓展：1.异步加载：如果数据较大或需要从后端获取，可以使用el-tree-v2的lazy属性来实现异步加载节点数据。

通过监听展开事件，在展开节点时动态获取数据并更新节点状态。

2.右键菜单：为el-tree-v2组件的节点绑定右键菜单，通过监听右键菜单事件来处理相关操作。

可以使用Vue的自定义指令（v-contextmenu）或其他插件来实现。

3.拖拽排序：可将el-tree-v2组件的节点设置为可拖拽，并监听拖拽事件来实现节点的拖拽排序功能。

可以使用Vue的拖拽插件（如vue-draggable）来简化实现。

4.树的搜索：为el-tree-v2组件添加搜索框，通过监听搜索事件对树进行过滤，只显示匹配的节点。

可以使用Vue的计算属性或其他过滤函数来实现。

5.节点自定义渲染：el-tree-v2组件提供了插槽（slot）来自定义节点的渲染内容，可以根据需求灵活定制节点的显示方式，如添加按钮、图标等。

总结来说，el-tree-v2是一个功能强大且易于使用的树形控件，适用于展示和管理层级数据。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

a {text-decoration:none;}a,a:visited {color:#000;background:inherit;}body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;}dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}dd {margin:0 0 0 15px;}h4 {margin:0;padding:0;font-size:18px;text-align:center;}p {margin:0;padding:0 0 0 18px;}p a,p a:visited {color:#00f;background:inherit;}/*CNLTreeMenu Start*/.CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;}.CNLTreeMenu ul {padding:0;}.CNLTreeMenu li {list-style:none;padding:0;}.Closed ul {display:none;}.Child img.s {background:none;cursor:default;}#CNLTreeMenu1 ul {margin:0 0 0 17px;}#CNLTreeMenu1 img.s {width:20px;height:15px;}#CNLTreeMenu1 .Opened img.s {background:url(skin1/opened.gif) no-repeat 0 0;}#CNLTreeMenu1 .Closed img.s {background:url(skin1/closed.gif) no-repeat 0 0;}#CNLTreeMenu1 .Child img.s {background:url(skin1/child.gif) no-repeat 3px 5px;}#CNLTreeMenu2 ul {margin:0 0 0 17px;}#CNLTreeMenu2 img.s {width:17px;height:15px;}#CNLTreeMenu2 .Opened img.s {background:url(skin2/opened.gif) no-repeat 4px 6px;}#CNLTreeMenu2 .Closed img.s {background:url(skin2/closed.gif) no-repeat 3px 6px;}#CNLTreeMenu2 .Child img.s {background:url(skin2/child.gif) no-repeat 3px 5px;}#CNLTreeMenu3 ul {margin:0 0 0 17px;}#CNLTreeMenu3 img.s {width:34px;height:18px;}#CNLTreeMenu3 .Opened img.s {background:url(skin3/opened.gif) no-repeat 0 1px;}#CNLTreeMenu3 .Closed img.s {background:url(skin3/closed.gif) no-repeat 0 1px;}#CNLTreeMenu3 .Child img.s {background:url(skin3/child.gif) no-repeat 13px 2px;}/*CNLTreeMenu End*//*Temp CSS for View Demo*/#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}#CNLTreeMenu1,#CNLTreeMenu2 {padding-bottom:15px;}.ViewCode {clear:both;border:1px solid #FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px;}.ViewCode h6 {color:#00f;}function Ob(o){var o=document.getElementById(o)?document.getElementById(o):o;return o;}function Hd(o) {Ob(o).style.display="none";}function Sw(o) {Ob(o).style.display="";}function ExCls(o,a,b,n){var o=Ob(o);for(i=0;i<n;i++) {o=o.parentNode;}o.className=o.className==a?b:a;}function CNLTreeMenu(id,TagName0) {this.id=id;this.TagName0=TagName0==""?"li":TagName0;this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {this.ClassName0=ClassName0;this.ClassName1=ClassName1;this.ClassName2=ClassName2;this.ImgUrl=ImgUrl || "css/s.gif";this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" class=\"s\" />";for (i=0;i<this.AllNodes.length;i++ ) {this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.I mgBlankA)+this.AllNodes[i].innerHTML;}}this.SetNodes = function (n) {var sClsName=n==0?this.ClassName0:this.ClassName1;for (i=0;i<this.AllNodes.length;i++ ) {this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;}}}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" lang="zh-cn"><head><title>CNL Tree Menu Ver1.02 - 无限级树形菜单Written by CNLei, 枫岩</title><meta http-equiv="content-type" content="text/html;charset=gb2312" /><meta name="generator" content="editplus" /><meta name="author" content="CNLei,枫岩," /><meta name="keywords" content="CSS Menu,树形菜单,CNLei" /><meta name="description" content="" /><link type="text/css" rel="stylesheet" href="css/css4cnltreemenu.css" /><script type="text/javascript" src="js/js4cnltreemenu.js"></script></head><body><p>实例演示：</p><dl><dt>CNL Tree Menu <small>Ver1.02</small></dt><dd><strong>Author</strong>：CNLei,枫岩</dd><dd><strong>MySite</strong>：<a href="" style="color:#00f;"></a>, <a href="" style="color:#00f;"></a></dd><dd><strong>E-Mail</strong>：cnlei.y.l<span style="color:#00f">#</span> (请将<span style="color:#00f">#</span>换成<span style="color:#00f">@</span>)</dd><dd><strong>Intro</strong>：<ol><li>"CNL Tree Menu"为无限级树形，兼容以下版本的浏览器：IE5.0+, FF1.06+, Opera8.5+ ……</li><li>HTML,CSS,JavaScript代码相互分离(即数据，风格，脚本三者分离)，可应用于多种场合，易于维护修改；更换树形图标，只需要修改CSS文件.</li><li>通过W3C校验(XHtml1-Strict,CSS1.0). </li><li>最后更新：2006-2-13 </li><li>下载地址：<a href="/mycode/CNLTreeMenu/CNLTreeMenuVer1.0.2.rar">点击下载</a> </li></ol></dd></dl><div class="CNLTreeMenu" id="CNLTreeMenu1"><h4>CNL Tree Menu1</h4><p><a id="AllOpen_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a id="AllClose_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a></p><ul><li class="Opened"><a href=""></a><ul><li><a href="#1">技术区</a><ul><li><a href="#">网页技术</a><ul><li class="Child"><a href="#">JavaScript</a></li><li class="Child"><a href="#">HTML/XHTML/CSS</a></li><li class="Child"><a href="#">Ajax</a></li><li class="Child"><a href="#">网页制作工具</a></li><li class="Child"><a href="#">设计/图形</a></li><li class="Child"><a href="#">Flash/多媒体</a></li><li class="Child"><a href="#">VML/Web3D</a></li></ul></li><li><a href="#">Web编程</a><ul><li class="Child"><a href="#">Java</a></li><li class="Child"><a href="#">.Net</a></li><li class="Child"><a href="#">ASP/VBScript</a></li><li class="Child"><a href="#">PHP</a></li><li class="Child"><a href="#">Perl/Python</a></li><li class="Child"><a href="#">Web综合/开源</a></li></ul></li><li><a href="#">数据库</a><ul><li class="Child"><a href="#">Access/SQLServer</a></li> <li class="Child"><a href="#">MySQL/PostgreSQL</a></li><li class="Child"><a href="#">Oracle/DB2/Sybase</a></li></ul></li><li><a href="#">服务器</a><ul><li class="Child"><a href="#">Windows/IIS</a></li><li class="Child"><a href="#">Unix/Linux/Apache</a></li><li class="Child"><a href="#">应用服务器</a></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></div><div class="CNLTreeMenu" id="CNLTreeMenu2"><h4>CNL Tree Menu2</h4><p><a id="AllOpen_2" href="#" onclick="MyCNLTreeMenu2.SetNodes(0);Hd(this);Sw('AllClose_2');">全部展开</a><aid="AllClose_2" href="#" onclick="MyCNLTreeMenu2.SetNodes(1);Hd(this);Sw('AllOpen_2');" style="display:none;">全部折叠</a></p><ul><li class="Opened"><a href=""></a><ul><li><a href="#1">技术区</a><ul><li><a href="#">网页技术</a><ul><li class="Child"><a href="#">JavaScript</a></li><li class="Child"><a href="#">HTML/XHTML/CSS</a></li><li class="Child"><a href="#">Ajax</a></li><li class="Child"><a href="#">网页制作工具</a></li><li class="Child"><a href="#">设计/图形</a></li><li class="Child"><a href="#">Flash/多媒体</a></li><li class="Child"><a href="#">VML/Web3D</a></li></ul></li><li><a href="#">Web编程</a><ul><li class="Child"><a href="#">Java</a></li><li class="Child"><a href="#">.Net</a></li><li class="Child"><a href="#">ASP/VBScript</a></li><li class="Child"><a href="#">PHP</a></li><li class="Child"><a href="#">Perl/Python</a></li><li class="Child"><a href="#">Web综合/开源</a></li></ul></li><li><a href="#">数据库</a><ul><li class="Child"><a href="#">Access/SQLServer</a></li><li class="Child"><a href="#">MySQL/PostgreSQL</a></li><li class="Child"><a href="#">Oracle/DB2/Sybase</a></li></ul></li><li><a href="#">服务器</a><ul><li class="Child"><a href="#">Windows/IIS</a></li><li class="Child"><a href="#">Unix/Linux/Apache</a></li><li class="Child"><a href="#">应用服务器</a></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></div><div class="CNLTreeMenu" id="CNLTreeMenu3"><h4>CNL Tree Menu3</h4><p><a id="AllOpen_3" href="#" onclick="MyCNLTreeMenu3.SetNodes(0);Hd(this);Sw('AllClose_3');">全部展开</a><a id="AllClose_3" href="#" onclick="MyCNLTreeMenu3.SetNodes(1);Hd(this);Sw('AllOpen_3');" style="display:none;">全部折叠</a></p><ul><li class="Opened"><a href=""></a><ul><li><a href="#1">技术区</a><ul><li><a href="#">网页技术</a><ul><li class="Child"><a href="#">JavaScript</a></li><li class="Child"><a href="#">HTML/XHTML/CSS</a></li><li class="Child"><a href="#">Ajax</a></li><li class="Child"><a href="#">网页制作工具</a></li><li class="Child"><a href="#">设计/图形</a></li><li class="Child"><a href="#">Flash/多媒体</a></li><li class="Child"><a href="#">VML/Web3D</a></li></ul></li><li><a href="#">Web编程</a><ul><li class="Child"><a href="#">Java</a></li><li class="Child"><a href="#">.Net</a></li><li class="Child"><a href="#">ASP/VBScript</a></li><li class="Child"><a href="#">PHP</a></li><li class="Child"><a href="#">Perl/Python</a></li><li class="Child"><a href="#">Web综合/开源</a></li></ul></li><li><a href="#">数据库</a><ul><li class="Child"><a href="#">Access/SQLServer</a></li><li class="Child"><a href="#">MySQL/PostgreSQL</a></li><li class="Child"><a href="#">Oracle/DB2/Sybase</a></li></ul></li><li><a href="#">服务器</a><ul><li class="Child"><a href="#">Windows/IIS</a></li><li class="Child"><a href="#">Unix/Linux/Apache</a></li><li class="Child"><a href="#">应用服务器</a></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li><li><a href="#1">二级目录</a><ul><li><a href="#">三级目录</a><ul><li><a href="#">四级目录</a><ul><li><a href="#">五级目录</a><ul><li><a href="#">......</a><ul><li><a href="#">第n级目录</a><ul><li class="Child"><a href="#">叶结点1</a></li><li class="Child"><a href="#">叶结点2</a></li><li class="Child"><a href="#">叶结点3</a></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></div><script type="text/javascript"></script></body></html>。