高仿CSDN社区树形图.

作者：55525wio | 来源：互联网 | 2023-10-10 16:17

一直感觉CSDN社区的树形结构特别的人性化，直观化。最近做系统的时候需要用到这个树形结构，于是模仿CSDN的树形结构做了一个自己的树形结构，

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

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

让我们一步一步的分析

1、首先把用到的图片下载下来&＃xff0c;一共15个图片&＃xff0c;利用firebug工具可以很轻松的把图片下载&＃xff08;另存为&＃xff09;下来。

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

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

Javascript代码&＃xff1a;

[Javascript] view plaincopyprint?

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

全部实现代码&＃xff1a;

[html] view plaincopyprint?

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








id&＃61;"img1" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">

 根目录



id&＃61;"img2" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">

二级目录	




id&＃61;"img3" src&＃61;"http://bbs.csdn.net/ui/scripts/System/_resource/MzTreeView/_plus1.gif">

三级目录







题目一






题目二







题目三







题目四

实现效果如下:

推荐阅读

js
Struts2 + json+ jquery 实现三级联动action和jsp代码竟然有小红叉，提示缺双引号，检查了转义符号也没缺啊，求解

publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]

蜡笔小新 2024-11-21 16:25:41
js
UVALive 8201 - BBP 公式计算圆周率

在1995年，Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后，Bailey 和 Borwein 在他们的论文中发表了这一发现，这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]

蜡笔小新 2024-11-21 18:32:57
js
CSS Border 属性：solid 边框的使用详解

本文详细介绍了如何在CSS中使用solid边框属性，包括其基本语法、应用场景及高级技巧，适合初学者和进阶用户参考。 ... [详细]

蜡笔小新 2024-11-21 18:11:20
js
二维码的实现与应用

本文介绍了二维码的基本概念、分类及其优缺点，并详细描述了如何使用Java编程语言结合第三方库（如ZXing和qrcode.jar）来实现二维码的生成与解析。 ... [详细]

蜡笔小新 2024-11-21 17:10:15
instance
入门指南：使用FastRPC技术连接Qualcomm Hexagon DSP

本文旨在为初学者提供关于如何使用FastRPC技术连接Qualcomm Hexagon DSP的基础知识。FastRPC技术允许开发者在本地客户端实现远程调用，从而简化Hexagon DSP的开发和调试过程。 ... [详细]

蜡笔小新 2024-11-21 10:03:34
js
理解浏览器历史记录（2）hashchange、pushState

阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后，本打算去研究pushState，偶然在一些信息中发现了锚点变 ... [详细]

蜡笔小新 2024-11-20 20:05:37
js
深入理解：AJAX学习指南

本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用，旨在为初学者提供全面的学习资料。 ... [详细]

蜡笔小新 2024-11-20 17:58:54
process
ABAP开发者需关注的几大关键问题

长期从事ABAP开发工作的专业人士，在面对行业新趋势时，往往需要重新审视自己的发展方向。本文探讨了几位资深专家对ABAP未来走向的看法，以及开发者应如何调整技能以适应新的技术环境。 ... [详细]

蜡笔小新 2024-11-21 18:21:06
js
深入解析JQuery Mobile特有的事件与方法

本文详细介绍了JQuery Mobile框架中特有的事件和方法，帮助开发者更好地理解和应用这些特性，提升移动Web开发的效率。 ... [详细]

蜡笔小新 2024-11-21 14:24:21
js
IC卡操作功能实现

本文介绍了如何通过C#语言调用动态链接库（DLL）中的函数来实现IC卡的基本操作，包括初始化设备、设置密码模式、获取设备状态等，并详细展示了将TextBox中的数据写入IC卡的具体实现方法。 ... [详细]

蜡笔小新 2024-11-21 11:02:19
js
java语言基础数据类型：详解

数据类型--char一、char1.1char占用2个字节char取值范围：【0~65535】char采用unicode编码方式char类型的字面量用单引号括起来char可以存储一 ... [详细]

蜡笔小新 2024-11-21 08:47:17
ip
如何从BAM文件绘制ATAC-seq插入片段长度分布图？

在ATAC-seq数据处理中，插入片段长度的分布图是一个重要的质量控制指标，它能反映出核小体的周期性排列。本文将详细介绍如何从BAM文件中提取并绘制这些数据。 ... [详细]

蜡笔小新 2024-11-20 22:35:16
select
解决SQL Server中几何类型列的INTERSECT操作问题

本文探讨了在SQL Server中处理几何类型列时遇到的INTERSECT操作限制，并提供了解决方案，包括通过转换数据类型和使用额外表结构的方法。 ... [详细]

蜡笔小新 2024-11-20 20:09:58
instance
使用Service Locator模式实现高效的服务命名访问

本文探讨了如何通过Service Locator模式来简化和优化在B/S架构中的服务命名访问，特别是对于需要频繁访问的服务，如JNDI和XMLNS。该模式通过缓存机制减少了重复查找的成本，并提供了对多种服务的统一访问接口。 ... [详细]

蜡笔小新 2024-11-20 19:26:30
js
深入解析SpringMVC中的HandlerMapping机制

本文将从基础概念入手，详细探讨SpringMVC框架中DispatcherServlet如何通过HandlerMapping进行请求分发，以及其背后的源码实现细节。 ... [详细]

蜡笔小新 2024-11-20 19:24:42

55525wio

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章