JavaScript写的“山寨版”树形菜单

　　编程之家 jb51.cc 今天突然心血来潮，想用js写点东西，也许是闷得太久了吧。于是乎，这山寨版jsTree就出来了。说他山寨是因为js水平有限，写出来的东西自己玩玩还可，真要用到项目中，还需深加工，还需再改造。废话少说吧，上代码：

<!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><<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv=Content-Type content=text/html; charset=utf-8 /><title>山寨版jsTree-LIEHUO.NET</title><style type=text/css>ul{padding:0; margin-left:20px;}ul li{list-style:none; width:100px; padding:0; margin:0;}</style><script type="text/javascript">function Tree(containerID){ this.childEl = document.createElement("ul"); this.containerEl = document.getElementById(containerID);}Tree.prototype = { addNode:function(node){ this.childEl.appendChild(node.el); node.parentEl = this.childEl; },render:function(){ this.containerEl.appendChild(this.childEl); }}function treeNode(text){ this.parentEl = null; this.el = null; this.text = text; this.childEl = null; this.init(); this.clickEvent();}treeNode.prototype = { init:function(){ this.el = document.createElement("li"); this.el.appendChild(document.createTextNode(this.text)); },addNode:function(node){ if(this.childEl==null) { this.el.style.cursor = "pointer"; this.childEl = document.createElement("ul"); this.childEl.style.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play = "none"; } this.parentEl.appendChild(this.childEl); this.childEl.appendChild(node.el); node.parentEl = this.childEl; },clickEvent:function(){ var me = this; me.el.onclick = function(){ if(me.childEl!=null) { me.childEl.style.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play == "none"? function(){me.childEl.style.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play = "block"}(): function(){me.childEl.style.<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play = "none"}(); } } }}window.onload = function(){ var tree = new Tree("testDiv"); for(var i=0;i<5;i++) { var node = new treeNode(0+","+i); tree.addNode(node); for(var j=0;j<5;j++) { var node1 = new treeNode(1+","+j); node.addNode(node1); for(var m=0;m<5;m++) { var node2 = new treeNode(2+","+m); node1.addNode(node2); for(var n=0;n<5;n++) { var node3 = new treeNode(3+","+n); node2.addNode(node3); } } } } tree.render();}</script></head><body><div id=testDiv></div></body></html>本教程来自网　http://www.wfuyu.com/
提示：可修改后代码再运行!

　　只设计了最主要的显示动作，样式的定制及加载都没进行。以后，真要用到得时候或许我会再扩展活重写吧。

　　转自：http://www.cnblogs.com/bravfing/

JavaScript写的“山寨版”树形菜单

相关推荐