手写树形菜单-优快云博客

本文介绍了一种使用纯JavaScript和CSS实现的树形菜单。通过自定义类来绘制连接线，实现了文件夹展开和折叠的功能。

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

树形菜单到处都是，但是说实话，我自己觉得要写一个出来，真的不简单，

难点就难在要产生如下图中的红圈圈标注的线。

想了一天，基本写出来了，不过觉得自己真的变老了，脑筋跟不上。

运行代码

(如果"运行代码"实效，可以把代码直接拷贝到本地也可以运行。如果要想图片加载速度快，可以把图片保存在本地并替换)

<html> <head> <title>Tree View</title> <meta name="author" content="" /> <style type="text/css"> body{ font-size: 9pt; } .treeview-line-cross{ font-size:0px; border:solid red 0px; height:16px; width:16px; background-image:url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/sunxing007/EntryImages/20090611/treeview-default-line.gif); background-repeat:no-repeat; background-position:0px 0px; float:left; } .treeview-line-single{ font-size:0px; border:solid red 0px; height:16px; width:16px; background-image:url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/sunxing007/EntryImages/20090611/treeview-default-line.gif); background-repeat:no-repeat; background-position:0px -32px; float:left; } .treeview-line-last{ font-size:0px; border:solid red 0px; height:8px; width:16px; background:url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/sunxing007/EntryImages/20090611/treeview-default-line.gif) left bottom no-repeat; float:left; } .treeview-line-blank{ font-size:0px; border:solid red 0px; height:16px; width:16px; float:left; } </style> </head> <body> <div id="dest" style="border: solid red 1px; width: 300px; height: 500px;"></div> </body> <script> function $(id){return document.getElementById(id);} /** * js树形菜单 * 作者 sunxing007 * 转载请注明来自：http://blog.youkuaiyun.com/sunxing007 */ function TreeView(title, isFolder){ this.el = null; this.title = title; this.isFolder = isFolder; this.children = []; } TreeView.prototype.printout = function(ident){ alert(this.title); if(this.isFolder&&this.children.length>0){ for(var i=0; i<this.children.length; i++){ this.children[i].printout(); } } } TreeView.prototype.toHTML = function(leftStr, append){ var t = "<div style='height:16px; overflow:hidden;'>"; var hasChild = this.isFolder&&this.children.length>0; if(this.isFolder){ t += (append + "<img src='https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/sunxing007/EntryImages/20090611/folder.gif' onclick='doLeafClick(this," + hasChild + ")'/>" + this.title); } else{ t += (append + "<img src='https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/sunxing007/EntryImages/20090611/file.gif' />" + this.title); } t += "</div>"; if(this.isFolder&&this.children.length>0){ t += "<div>"; for(var i=0; i<this.children.length-1; i++){ t += ( leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-single'></div>", "<div class='treeview-line-cross'></div>")); } t += (leftStr + this.children[i].toHTML(leftStr+"<div class='treeview-line-blank'></div>", "<div class='treeview-line-last'></div>")); t += "</div>"; } return t; } var root = new TreeView("C:(SYSTEM)", true); var bea = new TreeView("bea", true); bea.children.push(new TreeView("logs", true)); bea.children.push(new TreeView("license.bea", false)); root.children.push(bea); var doc = new TreeView("doc", true); var basic = new TreeView("Basic", true); basic.children.push(new TreeView("test.xml", false)) doc.children.push(basic); root.children.push(doc); root.children.push(new TreeView("winnt", true)); root.children.push(new TreeView("sys.info", false)); root.children.push(new TreeView("1.sql", false)); //root.printout(); $('dest').innerHTML = root.toHTML("",""); function doLeafClick(e, hasChild){ if(hasChild){ var c = e.parentNode.nextSibling; if(c.style.display==""){ e.src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/sunxing007/EntryImages/20090611/folder-closed.gif"; c.style.display="none"; } else{ e.src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/sunxing007/EntryImages/20090611/folder.gif"; c.style.display=""; } } else{ if(e.src.indexOf("folder-closed.gif")==-1){ e.src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/sunxing007/EntryImages/20090611/folder-closed.gif"; } else{ e.src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/sunxing007/EntryImages/20090611/folder.gif"; } } } </script> </html>

以上代码需要用到这些图片：