【免费】JavaScript树形菜单资源-CSDN文库

共11个文件

gif：9个

htm：1个

db：1个

需积分: 0 24 浏览量 2008-09-23 11:35:22 上传评论收藏 11KB RAR 举报

JavaScript树形菜单是一种常见的网页交互元素，用于组织和展示层次化的数据或链接。在网页设计中，它能够帮助用户以直观、易于理解的方式探索复杂的结构。本文将深入探讨如何使用JavaScript来实现这样的功能。我们需要理解树形菜单的基本结构。在计算机科学中，树是一种非线性数据结构，由节点（或称为顶点）和边组成，其中每个节点可以有零个或多个子节点。在树形菜单中，根节点通常代表顶级类别，而子节点代表下一级的分类或子分类。在JavaScript中实现树形菜单，我们通常会借助DOM（Document Object Model）来操作HTML元素。以下是一个简单的实现步骤： 1. **创建HTML结构**：我们需要在HTML中建立菜单的基础结构。这通常包括`<ul>`和`<li>`元素，其中`<li>`表示树的节点，可能包含一个可展开/折叠的箭头。 ```html <ul id="treeMenu"> <li> <span class="toggle">父节点</span> <ul class="children" style="display:none;"> <li>子节点1</li> <li>子节点2</li> </ul> </li> </ul> ``` 2. **CSS样式**：为菜单添加样式，如展开/折叠状态的箭头，以及隐藏/显示子节点的样式。 ```css .toggle { cursor: pointer; } .children { display: none; /* 默认隐藏子节点 */ } ``` 3. **JavaScript逻辑**：使用JavaScript处理用户的点击事件，控制节点的展开和折叠。这可以通过添加事件监听器到`<span class="toggle">`元素上完成。 ```javascript document.addEventListener('DOMContentLoaded', function() { var toggleNodes = document.querySelectorAll('.toggle'); toggleNodes.forEach(function(node) { node.addEventListener('click', function(e) { e.stopPropagation(); // 阻止事件冒泡 var children = this.nextElementSibling; if (children.style.display === 'none') { children.style.display = 'block'; } else { children.style.display = 'none'; } }); }); }); ``` 在以上代码中，当用户点击带有“toggle”类的元素时，会触发一个点击事件，切换相邻的子节点列表的显示状态。 4. **增强交互体验**：为了增加用户体验，我们可以添加动画效果，例如淡入淡出或滑动效果。此外，还可以实现异步加载子节点，当用户展开节点时才去获取数据，以优化页面性能。 5. **遍历和操作树**：在实际应用中，我们可能需要遍历树形菜单，查找特定节点，或者根据需求动态添加、删除节点。JavaScript提供了便利的数据结构和方法，如递归函数，来处理这些操作。 6. **拓展功能**：进一步，我们可以为树形菜单添加搜索功能、拖放功能，甚至支持多选、排序等高级特性。这需要更复杂的JavaScript逻辑和可能依赖于额外的库，如jQuery或现代的React、Vue等框架。 JavaScript实现的树形菜单是通过操纵DOM，结合事件监听和样式控制，为用户提供交互式的菜单界面。随着技术的发展，现在有许多成熟的库和框架，如jQuery UI、Bootstrap Treeview等，可以简化这一过程，提供更丰富的功能。然而，理解基础的实现原理对解决特定问题和优化性能仍然至关重要。

资源推荐

资源详情

资源评论

收起资源包目录

JS树型菜单.rar （11个子文件）

JS树型菜单

treemenu.htm 10KB

images

leafnode_end.gif 271B

closefolder.gif 305B

openfolder.gif 403B

line_y.gif 43B

openfolder_end.gif 401B

Thumbs.db 14KB

leafnode.gif 276B

openfolder_fst.gif 400B

closefolder_fst.gif 302B

closefolder_end.gif 304B

<style> table {font-size = 9pt} td {height = 10px} </style> <body> <span id="menus"></span> <span id="view"></span> </body> <script> var openfolder="<image src='images\\openfolder.gif'>"; var openfolder_fst="<image src='images\\openfolder_fst.gif'>"; var openfolder_end="<image src='images\\openfolder_end.gif'>"; var closefolder_fst="<image src='images\\closefolder_fst.gif'>"; var closefolder_end="<image src='images\\closefolder_end.gif'>"; var closefolder="<image src='images\\closefolder.gif'>"; var leafnode_end="<image src='images\\leafnode_end.gif'>"; var leafnode="<image src='images\\leafnode.gif'>"; /** * 构造树，初值为0 */ function tree(n) { var id = new Array("bar","pad",openfolder,closefolder); if(n == 0) { // 初始化变量 n = 1; i = 0; //变量i用于表示当前行 s = ""; } s += "<table >"; for(;i<tree_ar.length-1;i++) { var k = (n >= tree_ar[i+1][0])?0:1; //当前层数大于下一行的层数，需显示叶子节点(k=0)，否则是文件夹(k=1) if(n > tree_ar[i+1][0])// 若下一节点层次小于当前层次,叶子节点,结束本层次返回上一层次 { s += "<tr id='"+id[k]+"' value="+i+"><td>"+leafnode_end+"</td><td>"+tree_ar[i][1]+"</td></tr>"; s += "</td></tr></table>"; return tree_ar[i+1][0]; //返回下一节点的层数 } else if(n == tree_ar[i+1][0])// 若下一节点层次等于当前层次,叶子节点 { if(tree_ar[i+1][1]=="") //最后一个节点 s += "<tr id='"+id[k]+"' value="+i+"><td>"+leafnode_end+"</td><td>"+tree_ar[i][1]+"</td></tr>"; else s += "<tr id='"+id[k]+"' value="+i+"><td style=\"background:url(line_y.gif) repeat-y 7px 0\">"+leafnode+"</td><td>"+tree_ar[i][1]+"</td></tr>"; } else // 若下一节点层次大于当前层次，递归进入下一层次，非叶子节点。 { // 构造节点，注意这里的自定义属性value。作用是简化构造节点的描述，共享参数数组信息。 if(i==0 && k==1) //第一行非叶子节点 { s += "<tr id='firstfolder' value="+i+"><td>"+closefolder_fst+"</td><td>"+tree_ar[i][1]+"</td></tr>"; s += "<tr style='display:none' v=1>"+ "<td style=\"background:url(images\\line_y.gif) repeat-y 7px 0\"></td><td>"; } else { if(HasEqualLevel(i)) { s += "<tr id='"+id[k]+"' value="+i+"><td>"+id[k+2]+"</td><td>"+tree_ar[i][1]+"</td></tr>"; s += "<tr style='display:none' v=1>"+ "<td style=\"background:url(images\\line_y.gif) repeat-y 7px 0\"></td><td>"; } else { s += "<tr id='endfolder' value="+i+"><td>"+closefolder_end+"</td><td>"+tree_ar[i][1]+"</td></tr>"; s += "<tr style='display:none' v=1>"+ "<td></td><td>"; } } var m = tree(tree_ar[++i][0]); s += "</td></tr>"; // 当递归返回值小于当前层次期望值时，将产生连续的返回动作。 if(m < n) { s += "</table>"; //alert(tree_ar[i][1]); return m; } } } s += "</table>"; return s; } function HasEqualLevel(level) { for(j=level+1;j<tree_ar.length-1;j++) { if(tree_ar[j][0]==tree_ar[level][0]) { return true; } } return false; } </script> <script for=firstfolder event=onclick> // 分枝节点的点击响应，根节点 v = this.parentElement.rows[this.rowIndex+1].style; if(v.display == 'block') { v.display = 'none'; this.cells[0].innerHTML = closefolder_fst; view.innerHTML = ""; // 自行修改为参数数组定义的闭合动作 } else { v.display = 'block'; this.cells[0].innerHTML = openfolder_fst; view.innerHTML = "<b>"+tree_ar[this.value][1]+"</b>"; // 自行修改为参数数组定义的展开动作 } /** * 以下代码用于关闭已展开的其他分枝 * 如需自行关闭展开的分枝则从这里直接返回或删去这段代码 */ if(! tree_ar[this.value].type) // 如该节点为首次进入，则记录所在层次信息 genTreeInfo(this); var n = 1*this.value+1; for(i=n;i<tree_ar.length-1;i++) { // 关闭排列在当前节点之后的树 if(tree_ar[i].type == "pad") { tree_ar[i].obj2.style.display = 'none'; tree_ar[i].obj1.cells[0].innerHTML = closefolder; } } while(tree_ar[--n][0] > 1); // 回溯到当前树的起点 while(--n >= 0) // 关闭排列在当前树的起点之前的树 if(tree_ar[n].type == "pad") { tree_ar[n].obj2.style.display = 'none'; tree_ar[n].obj1.cells[0].innerHTML = closefolder; } /** 记录层次信息，用以简化遍历树时的复杂的节点描述 **/ function genTreeInfo(o) { var el = o.parentElement; for(var i=0;i<el.rows.length;i++) { if(el.rows[i].id != "") { tree_ar[el.rows[i].value].type = el.rows[i].id; } if(el.rows[i].id == "pad" ||el.rows[i].id == "firstfolder" ||el.rows[i].id == "endfolder") { tree_ar[el.rows[i].value].obj1 = el.rows[i]; tree_ar[el.rows[i].value].obj2 = el.rows[i+1]; } } } </script> <script for=endfolder event=onclick> // 分枝节点的点击响应，没有同级分支 v = this.parentElement.rows[this.rowIndex+1].style; if(v.display == 'block') { v.display = 'none'; this.cells[0].innerHTML = closefolder_end; view.innerHTML = ""; // 自行修改为参数数组定义的闭合动作 } else { v.display = 'block'; this.cells[0].innerHTML = openfolder_end; view.innerHTML = "<b>"+tree_ar[this.value][1]+"</b>"; // 自行修改为参数数组定义的展开动作 } /** * 以下代码用于关闭已展开的其他分枝 * 如需自行关闭展开的分枝则从这里直接返回或删去这段代码 */ if(! tree_ar[this.value].type) // 如该节点为首次进入，则记录所在层次信息 genTreeInfo(this); var n = 1*this.value+1; for(i=n;i<tree_ar.length-1;i++) { // 关闭排列在当前节点之后的树 if(tree_ar[i].type == "pad") { tree_ar[i].obj2.style.display = 'none'; tree_ar[i].obj1.cells[0].innerHTML = closefolder; } } while(tree_ar[--n][0] > 1); // 回溯到当前树的起点 while(--n >= 0) // 关闭排列在当前树的起点之前的树 { if(tree_ar[n].type == "pad") { tree_ar[n].obj2.style.display = 'none'; tree_ar[n].obj1.cells[0].innerHTML = closefolder; } } /** 记录层次信息，用以简化遍历树时的复杂的节点描述 **/ function genTreeInfo(o) { var el = o.parentElement; for(var i=0;i<el.rows.length;i++) { if(el.rows[i].id != "") { tree_ar[el.rows[i].value].type = el.rows[i].id; } if(el.rows[i].id == "pad" ||el.rows[i].id == "firstfolder" ||el.rows[i].id == "endfolder") { tree_ar[el.rows[i].value].obj1 = el.rows[i]; tree_ar[el.rows[i].value].obj2 = el.rows[i+1]; } } } </script> <script for=pad event=onclick> // 分枝节点的点击响应 v = this.parentElement.rows[this.rowIndex+1].style; if(v.display == 'block') { v.display = 'none'; this.cells[0].innerHTML = closefolder; view.innerHTML = ""; // 自行修改为参数数组定义的闭合动作 }else { v.display = 'block'; this.cells[0].innerHTML = openfolder; view.innerHTML = "<b>"+tree_ar[this.value][1]+"</b>"; // 自行修改为参数数组定义的展开动作 } /** * 以下代码用于关闭已展开的其他分枝 * 如需自行关闭展开的分枝则从这里直接返回或删去这段代码 */ if(! tree_ar[this.value].type) // 如该节点为首次进入，则记录所在层次信息 genTreeInfo(this); var n = 1*this.value+1; for(i=n;i<tree_ar.length-1;i++) { // 关闭排列在当前节点之后的树 if(tree_ar[i].type == "pad") { tree_ar[i].obj2.style.display

评论收藏

内容反馈