高仿优快云社区树形图 .

最新推荐文章于 2022-08-04 15:40:32 发布
最新推荐文章于 2022-08-04 15:40:32 发布
阅读量598 收藏
点赞数
分类专栏： javascript css
本文介绍如何模仿优快云社区的树形结构来创建一个具有展开和收起功能的目录结构。通过使用HTML、CSS和JavaScript实现，并详细解释了代码逻辑。

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

一直感觉优快云社区的树形结构特别的人性化，直观化。最近做系统的时候需要用到这个树形结构，于是模仿优快云的树形结构做了一个自己的树形结构，将实现过程记录如下，希望对读者有用。

工欲善其事必先利其器，要模仿一个经典的树形结构就应该参照人家是怎么实现的，这里用到了firebug插件，在firefox中查看了优快云的树形结构的组成，发现其实树形结构就是一个个的DIV借助img以及背景图片拼凑而成，整理了一下思路发现其实要想达到优快云的效果也不是很困难。

让我们一步一步的分析

1、首先把用到的图片下载下来，一共15个图片，利用firebug工具可以很轻松的把图片下载（另存为）下来。

2、以上这些图片都是在CSS文件中作为背景图片出现的，其他地方以空白图片填充。

3、然后分析树形结构的组成，首先有一个根目录，然后每个根目录下面有其子目录，也就是说每个子目录开始的时候是隐藏的只有当鼠标点击展开的时候才会显示，在此过程中节点图标以及文件夹图标会变化。

javascript代码：

[javascript] view plain copy print ?
  1.         <script language="JavaScript">  
  2. function display(id) {  
  3.      eval("var div=div"+id);  
  4.      eval("var img=img"+id);  
  5.      eval("var im=im"+id);  
  6.      div.style.display=div.style.display=="block"?"none":"block";  
  7.      img.src=div.style.display=="block"?"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus1.gif":"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_plus1.gif";  
  8.      im.src=div.style.display=="block"?"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folderopen.gif":"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folder.gif";  
  9.      img.alt=div.style.display=="block"?"关闭":"展开";  
  10. }  
  11. </script>  
		<script language="JavaScript">
function display(id) {
	 eval("var div=div"+id);
	 eval("var img=img"+id);
	 eval("var im=im"+id);
	 div.style.display=div.style.display=="block"?"none":"block";
	 img.src=div.style.display=="block"?"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus1.gif":"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_plus1.gif";
	 im.src=div.style.display=="block"?"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folderopen.gif":"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folder.gif";
	 img.alt=div.style.display=="block"?"关闭":"展开";
}
</script>


4、当点击展开标签的时候进行判断如果为缩略图片则转变为展开图片并且将隐藏的内容显示，以至于达到资源管理器的效果。

全部实现代码：

[html] view plain copy print ?
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=GB18030">  
  4.       
  5.   
  6.   
  7.         <script language="JavaScript">  
  8. function display(id) {  
  9.      eval("var div=div"+id);  
  10.      eval("var img=img"+id);  
  11.      eval("var im=im"+id);  
  12.      div.style.display=div.style.display=="block"?"none":"block";  
  13.      img.src=div.style.display=="block"?"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus1.gif":"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_plus1.gif";  
  14.      im.src=div.style.display=="block"?"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folderopen.gif":"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folder.gif";  
  15.      img.alt=div.style.display=="block"?"关闭":"展开";  
  16. }  
  17. </script>  
  18.     </head>  
  19.     <body class="body1" style="background-color :#E5E5E5">  
  20.     <div id="title" ></div>  
  21.         <table>  
  22.             <tr>  
  23.                 <td valign="top" nowrap="nowrap">  
  24.                     <div>  
  25.                         <img alt="展开" style="cursor:hand;" onClick="display('1');"  
  26.                             id="img1" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_plus1.gif">  
  27.                         <img id="im1" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folder.gif">  
  28.                         <a> 根目录</a>  
  29.                         <div style="display:none;" id="div1">  
  30.                             <div style="background-image:http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line1.gif">  
  31.                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif" >  
  32.                                 <img alt="展开" style="cursor:hand;" onClick="display('2');"  
  33.                                     id="img2" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_plus1.gif">  
  34.                                 <img id="im2" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folder.gif">  
  35.                                 <a>二级目录</a>   
  36.                                <div style="display:none;" id="div2">  
  37.                                     <div>  
  38.                                         <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  39.                                         <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  40.                                         <img alt="展开" style="cursor:hand;" onClick="display('3');"  
  41.                                             id="img3" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_plus1.gif">  
  42.                                         <img id="im3" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folder.gif">  
  43.                                         <a>三级目录</a>  
  44.                                         <div style="display:none;" id="div3">  
  45.                                             <div>  
  46.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  47.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  48.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  49.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus1.gif">  
  50.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/file.gif">  
  51.                                                 <a>题目一</a>  
  52.                                             <div>  
  53.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  54.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  55.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  56.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus1.gif">  
  57.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/file.gif">  
  58.                                                   
  59.                                                 <a>题目二</a>  
  60.                                             </div>  
  61.                                             <div>  
  62.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  63.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  64.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  65.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus1.gif">  
  66.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/file.gif">  
  67.                                                 <a>题目三</a>  
  68.                                              </div>  
  69.                                              <div>  
  70.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  71.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  72.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">  
  73.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus2.gif">  
  74.                                                 <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/file.gif">  
  75.                                                 <a>题目四</a>  
  76.                                              </div>  
  77.                                             </div>  
  78.                                         </div>  
  79.                                     </div>                     
  80.                                 </div>                                  
  81.                             </div>  
  82.                         </div>  
  83.                     </div>  
  84.                 </td>  
  85.             </tr>  
  86.         </table>  
  87.     </body>  
  88. </html>  
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
	


		<script language="JavaScript">
function display(id) {
	 eval("var div=div"+id);
	 eval("var img=img"+id);
	 eval("var im=im"+id);
	 div.style.display=div.style.display=="block"?"none":"block";
	 img.src=div.style.display=="block"?"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus1.gif":"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_plus1.gif";
	 im.src=div.style.display=="block"?"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folderopen.gif":"http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folder.gif";
	 img.alt=div.style.display=="block"?"关闭":"展开";
}
</script>
	</head>
	<body class="body1" style="background-color :#E5E5E5">
    <div id="title" ></div>
		<table>
			<tr>
				<td valign="top" nowrap="nowrap">
					<div>
						<img alt="展开" style="cursor:hand;" onClick="display('1');"
							id="img1" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_plus1.gif">
						<img id="im1" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folder.gif">
						<a> 根目录</a>
						<div style="display:none;" id="div1">
							<div style="background-image:http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line1.gif">
								<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif" >
								<img alt="展开" style="cursor:hand;" onClick="display('2');"
									id="img2" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_plus1.gif">
								<img id="im2" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folder.gif">
								<a>二级目录</a>	
                               <div style="display:none;" id="div2">
									<div>
										<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
										<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
										<img alt="展开" style="cursor:hand;" onClick="display('3');"
											id="img3" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_plus1.gif">
										<img id="im3" src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/folder.gif">
										<a>三级目录</a>
										<div style="display:none;" id="div3">
											<div>
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus1.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/file.gif">
												<a>题目一</a>
                                            <div>
                                                <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus1.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/file.gif">
                                                
                                                <a>题目二</a>
                                            </div>
                                            <div>
                                                <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus1.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/file.gif">
                                                <a>题目三</a>
                                             </div>
                                             <div>
                                                <img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_line4.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/_minus2.gif">
												<img src="http://bbs.youkuaiyun.com/ui/scripts/System/_resource/MzTreeView/file.gif">
                                                <a>题目四</a>
                                             </div>
											</div>
										</div>
									</div>              	   
								</div>                                
                            </div>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>


实现效果如下:


Flutter 10天高仿大厂App及小技巧积累总结
十年代码写十年
05-12 1419
最近，花了一些时间学习研究Flutter，完成了高仿大厂App项目(项目使用的接口都是来自线上真实App抓包而来，可以做到和线上项目相同的效果)，也总结积累了一些小技巧和知识点，所以，在这里记录分享出来，也希望Flutter生态越来越好（flutter开发App效率真的很高，开发体验也是很好的 ????）。 以下博文会分为3个部分概述： 项目结构分析 项目功能详细概述（所用知识点） 小技巧积累总结 项目结构分析 其次，梳理下项目的目录结构，理解每个文件都是干什么的，我们先来看看一级目录，如...
ym——android源码大放送（实战开发必备）
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
高仿 csdn客户端源码
02-16
android 高仿csdn客户端源码 非常有价值。值得大家学习借鉴。
高仿优快云社区树形图
网站开发初中级代码参考-转载
03-14 137
一直感觉优快云社区的树形结构特别的人性化，直观化。最近做系统的时候需要用到这个树形结构，于是模仿优快云的树形结构做了一个自己的树形结构，将实现过程记录如下，希望对读者有用。 工欲善其事必先利其器，要模仿一个经典的树形结构就应该参照人家是怎么实现的，这里用到了firebug插件，在firefox中查看了优快云的树形结构的组成，发现其实树形结构就是一个个的DIV借助img以及背景图片拼...
树形图
weixin_44540773的博客
07-07 380
树形图 开发工具与关键技术：JS 作者：赵纯雨 班级：1803撰写时间：2019.7.2 再本次的项目当中，我们认识一个新知识，树形图，他是能从表中去添加商品，查看数据等快速操作，他的数据是能传递到数据库的，而数据库他也能接收得到，再数据库里添加数据，数据库数据可以直接传送到页面数据里，在树形图里面，点击商品，可以添加商品等等，可以进行基本的增删查改的，在页面里面，单击这个树形图，在旁...
简单树状图
08-06
使用jquery+html实现简易的树状图，方便展示。主要用户后台的数据展示和职位展示。
高仿开心网源码.zip
07-10
高仿开心网源码里部分是演示功能还有也就是说只有界面布局也有一部分是实现了的功能，例如录音和播放，表情插入输入框、图片处理、二维码扫描等等等等，本项目属于大型项目，有8个包和114个java源文件组成，另外项目中使用了很多例如Path按钮动画和侧边栏菜单等，另外项目中有几个非常不错的工具类，例如相片的特效处理工具类、录音工具类、文字处理工具类等都是很有收藏价值的工具类。  
Android 打造任意层级树形控件 考验你的数据结构和设计
热门推荐
Hongyang
10-20 13万+
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/40212367，本文出自：【张鸿洋的博客】1、概述大家在项目中或多或少的可能会见到，偶尔有的项目需要在APP上显示个树形控件，比如展示一个机构组织，最上面是boss，然后各种部门，各种小boss，最后各种小罗罗；整体是一个树形结构；遇到这样的情况，大家可能回去百度，因为层次多嘛，可
1000套安卓（Android）毕业设计（带论文）、大作业、实例快速下载 （Android Studio）
web13618542420的博客
05-30 5490
ctrl+F 快速定位 序号 类型 项目名称 1 毕业设计 毕业设计-基于安卓Android学生考勤信息管理系统.zip 2 毕业设计 毕业设计-安卓Android教务选课成绩管理系统.zip 3 毕业设计 114基于Android的理财记账本20141215+论文+需求文档+演示视频.zip.zip 4 毕业设计 Android科大讯飞语音识别.zip 5 毕业设计 基于android的点餐系统.zip.zip 6 毕业设计 Android客户端与服务器端的json数据交互(服务端客户端) .zip .
WordPress高仿我爱搜罗网主题模板SouLuo主题下载
09-30
　　这款WordPress仿制的我爱搜罗网小清新主题，命名为SouLou，SouLuo搜罗主题模板集成两种布局设计(3栏和2栏)可供选择，提供10种配色风格方案，在后台主题设置中点击保存随时切换，轻松打造属于个性化网站。 　　HTML5自适应网页设计，在电脑、平板和手机端都可以很好地展示;简单易用的后台主题设置选项控制面板，提供最详细的主题使用帮助教程，让你快速建造自己的站点。 　　主题特点: 　　◆简单易用的后台主题设置选项控制面板; 　　◆两种布局方案随时切换(3栏和2栏); 　　◆轻松打造属于个性化网站，提供10种配色方案; 　　◆自带分类、首页、页面、文章页seo功能; 　　◆自适应设计，电脑、平板、手机都可以流畅浏览; 　　◆首页幻灯片，调用置顶文章和后台可自定义2条; 　　◆集成免插件去除路径多余category标志; 　　◆自定义网站背景以及各个页面可自定义CSS背景; 　　◆多样化的导航栏小图标不限，根据个人喜好设定; 　　◆后台高级设置移除禁用多余代码及各种优化; 　　◆内置2个菜单：(主导航菜单和底部菜单); 　　◆内置2个侧栏，调用小工具(配置3个小工具);
2017年最牛逼的分类Android项目源码免费一次性打包下载！
源码分享的博客
03-29 2万+
之前发过一个帖子，但是那个帖子有点问题我就重新发一个吧，下面的源码是我从今年开始不断整理源码区和其他网站上的安卓例子源码，目前总共有810套左右，根据实现的功能被我分成了100多个类，总共接近2.5G，还在不断更新。初学者可以快速方便的找到自己想要的例子，大神也可以看一下别人的方法实现。虽然的例子都是我一个人辛辛苦苦花了很多时间和精力整理的，但是既然这些例子是来自于社区那就让他们免费回归社区吧，（...
Android第三方库收藏汇总，驱动核心源码详解和Binder超系统学习资源
m0_66684871的博客
03-04 934
这是使用CoordinatorLayout打造 打造炫酷效果的例子 https://github.com/gdutxiaoxu/CoordinatorLayoutExample LiveLayout 类似于映客，快手，等直播APP布局，直播刷礼物特效，定时清除礼物，计时器，圆形头像，横向listview等！！！ https://github.com/Qiang3570/LiveLayout TextViewExpandableAnimation Expandable TextView With Smooth
多种树形结构分析
松江的博客
08-04 1674
树形结构
树状图 - Dendrogram
Warren Lynch 的博客
06-24 2万+
树形图是一个树形图，显示通过聚类每个步骤的观察结果形成的组及其相似性水平。沿垂直轴测量相似性水平（或者，可以显示距离水平），沿水平轴列出不同的观测值。 解释 使用树形图查看每个步骤中簇的形成方式，并评估形成的簇的相似性（或距离）级别。 要查看相似度（或距离）级别，请将指针放在树形图中的水平线上。相似性或距离值如何在步骤之间变化的模式可以帮助您选择数据的最终分组。值突然改变的步骤可以确定定义最...
高仿IOSluncher.zip缺失包问题解决方案
这在开源社区中是一个常见的学习方式，开发者可以通过查看其他人的代码来学习新技术、设计模式或者最佳实践。 6. Android开源项目 文件名称列表中的“Launcher3”可能是指Android开源项目的名称。Android作为一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值