树

最新推荐文章于 2025-03-27 20:30:00 发布

原创最新推荐文章于 2025-03-27 20:30:00 发布 · 298 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#class #div #float #button #url #tree

Javascript 同时被 3 个专栏收录

57 篇文章

订阅专栏

CSS

35 篇文章

订阅专栏

HTML

16 篇文章

订阅专栏

本文介绍了一种自定义树形菜单的实现方法，通过HTML和CSS构建基本结构，并详细展示了如何通过设置不同的样式来区分节点间的层级关系及相邻节点的连接线。

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

虽然知道有一款jsTree的插件，但是自己还是想自己亲自写一个类似的东西，毕竟看别人的不如自己亲自动手写来得好来得快。

思路大致如下：假设边框的值为1px，每个节点（除了最顶端的root）父级节点都有对应的背景；一个节点如果他有下一个兄弟节点，那么它的左边框就有对应的为1px的边框，并且背景左移1px。

<!doctype html> <html> <head> <title>template</title> <meta charset="utf-8" /> <mce:style> body,button,input,select,textarea{ font:12px/1.5 Verdana,Tahoma,Arial,/5b8b/4f53; /* ı */ } .tree{ background-color: #FFFFFF; } .tree .tree-hd{ height: 18px; /* 定义节点的高，方便后面的节点上移 */ } /* 定义复选框的样式，其实我认为用图片更好，这样就不必担心各个浏览器的兼容问题 */ .tree .checkbox{ float: left; height: 13px; vertical-align: middle; margin: 0 5px; _margin-right: 0; /* IE6 hack for float 引起的文字内缩进 */ } /* 定义打开关闭按钮样式 */ .tree .open, .tree .close{ text-indent: -9999px; display: block; float: left; font-size: 0; height: 9px; width: 9px; line-height: 9px; margin-top: 5px; background: #8A9CA8 url(work.png) no-repeat 0 0; cursor: pointer; } .tree .close{ background-position: 0 -10px; } .tree .tree-bd{ /*display: none;*/ background: #FFFFFF url(work.png) no-repeat -10px 0; padding: 11px 0px 0px 31px; margin-top: -3px; margin-left: 4px; } /* 当下一个兄弟节点存在时，需要改变样式 */ .tree .tree-mid{ border-left: 1px solid #8A9CA8; background-position: -11px 0; padding-left: 30px; } </style> </head> <body> <div class="tree"> <div class="tree-hd"><span class="open">+/-</span><input type="checkbox" class="checkbox" />sdffdsa</div> <div class="tree-bd tree-mid"> <div class="tree-hd"><span class="open">+/-</span><input type="checkbox" class="checkbox" />sdffdsa</div> </div> <div class="tree-bd"> <div class="tree-hd"><span class="open">+/-</span><input type="checkbox" class="checkbox" />sdffdsa</div> </div> </div> </body> </html>

效果如下：（但是没有写js，因为之前的原稿弄没了，这是后来重写的）

+/-sdffdsa