原创的基于HTML/CSS/JavaScript的层级目录树

　　上面示例的原代码如下，为了保持完整性，我没有将代码中德HTML、CSS、JavaScript分开，都放在一个文件里，若你引用我提供的层级目录树代码，请将三者合理放在不同的文件中。需要注意的是，您需要在目录树上配置链接地址。相信你熟悉HTML、CSS、JavaScript，应该知道如何对下面的代码进行改造。享受你的美好生活吧，感受网页开发可以如此简单！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="author" content="心梦缘ocean ocl" />

  <title>My tree demo</title>

  <style type="text/css">

      /*主页面样式*/

      .leftNav {

        width: 20%;

        height:500px;

        border:#B9E0F7 1px solid;

        margin-left: 1%;

        margin-right: 1%;

    }

      #footer {

      color:#808080;

      line-height: 1.6em;

      padding: 0 0 1em 0;

    }

    /*我的树样式表*/

    .treeDiv {

      color: #636363;

      font-size: 14px;

      font-weight: normal;

      background-color: #fff;

      color: black;

      overflow: auto;

      padding: 0 0 1em 0;

      overflow-x: hidden;

    }

    .treeNode {

      white-space: nowrap;

      text-indent: -14px;

      margin: 6px 2px 5px 14px;

    }

    a.treeUnselected:hover, a.treeSelected:hover {

      background-color: #BFD9ED;

      text-decoration: none;

    }

    a.treeUnselected, a.treeSelected {

      color: black;

      padding: 1px 3px 1px 0;

      text-decoration: none;

    }

    a.treeSelected {

      background-color: #B9E0F7;

    }

    a.treeUnselected {

      background-color: transparent;

    }

    .treeSubnodes {

      display: block;

    }

    .treeSubnodesHidden {

      display: none;

    }

    .treeNode img.treeNoLinkImage, .treeNode img.treeLinkImage {

      height: 15px;

      margin-left: 5px;

      margin-right: 0px;

      width: 15px;

    }

    .treeNode img.treeLinkImage {

      cursor: pointer;

    }

    div.treeNode a, div.treeNode span.apiRoot {

      display: inline-block;

      margin-left: 24px;

      text-indent: 0;

      white-space: normal;

      width: 95%;

      word-wrap: break-word;

    }

    div.treeNode span.category {

      cursor: pointer;

    }

  </style>

</head>

<body>

<div class="leftNav">

    <div id="samplesToc">

        <div id="tree" style="top: 35px; left: 0px;" class="treeDiv">

          <div id="treeRoot" onselectstart="return false" ondragstart="return false">

            <div class="treeNode">

              <img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">

              <span onclick="expandCollapse(this.parentNode)" class="category">目录节点一 </span>

              <div class="treeSubnodesHidden">

                  <div class="treeNode">

                       <img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">

                       <span onclick="expandCollapse(this.parentNode)" class="category">目录节点一子目录 </span>

                       <div class="treeSubnodesHidden">

                           <div class="treeNode">

                              <a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点一</a>

                        </div>

                        <div class="treeNode">

                              <a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点二</a>

                        </div>

                    </div>

                  </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点六</a>

                </div>

              </div>

            </div>

            <!--end block-->

            <div class="treeNode">

              <img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">

              <span onclick="expandCollapse(this.parentNode)" class="category">目录节点二</span>

              <div class="treeSubnodesHidden">

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>

                </div>

                <div class="treeNode">

                  <a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>

                </div>

              </div>

            </div>

            <!--end block-->

          </div>

        </div>

    </div> <!-- end samplesToc -->

</div> <!-- end leftNav -->

<div class="right content">

</div><!-- end main  content-->

<div id="footer" align="center">

</div><!-- end footer-->

<script type="text/javascript">

var treeSelected = null;//选中的树节点

var imgPlus = new Image();

imgPlus.src="../graphics/treenodeplus.gif";

var imgMinus = new Image();

imgMinus.src="../graphics/treenodeminus.gif";

//父节点展开事件

function expandCollapse(el)

{

    //如果父节点有字节点（class 属性为treeSubnodesHidden），展开所有子节点

    if (el.className!= "treeNode"){

        return;    //判断父节点是否为一个树节点，如果树节点不能展开，请检查是否节点的class属性是否为treeNode

    }

    var child;

    var imgEl;//图片子节点，在树展开时更换图片

    for(var i=0; i < el.childNodes.length; i++)

    {

        child = el.childNodes[i];

        if (child.src)

        {

            imgEl = child;

        }

        else if (child.className == "treeSubnodesHidden")

        {

            child.className = "treeSubnodes";//原来若隐藏，则展开

            imgEl.src = imgMinus.src;//更换图片

            break;

        }

        else if (child.className == "treeSubnodes")

        {

            child.className = "treeSubnodesHidden";//原来若展开，则隐藏

            imgEl.src = imgPlus.src;//更换图片

            break;

        }

    }

}

//子节点点击事件，设置选中节点的样式

function clickAnchor(el)

{

    selectNode(el.parentNode);

    el.blur();

}

function selectNode(el)

{

    if (treeSelected != null)

    {

        setSubNodeClass(treeSelected, 'A', 'treeUnselected');

    }

    setSubNodeClass(el, 'A', 'treeSelected');

    treeSelected = el;

}

function setSubNodeClass(el, nodeName, className)

{

    var child;

    for (var i=0; i < el.childNodes.length; i++)

    {

        child = el.childNodes[i];

        if (child.nodeName == nodeName)

        {

            child.className = className;

            break;

        }

    }

}

</script>

</body>

</html>

原创的基于HTML/CSS/JavaScript的层级目录树的更多相关文章

基于window自带功能生成目录树
在写文档时,生成目录树是非常有必要的,可以清晰明了地用图阐释一些事情. 1 生成目录树 1.1 方案1:操作繁(只显示文件夹) 1 - win + R 2 - 输入 “CMD” ,打开命令提示窗口“ ...
推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
基于类（Java）和基于原理（JavaScript）的对象系统的比较
Java:面向对象编程语言,吸收了C++语言的各种优点,丢掉了C++让人头疼的多继承.指针等概念.具有功能强大和简单易用的两大特征.Java具有简单性.面向对象.分布式.健壮性.安全性.平台独立与可移 ...
基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class ...
Vim下的Web开发之html,CSS,javascript插件
Vim下的Web开发之html,CSS,javascript插件 HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...
学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
购书网站前端实现（HTML+CSS+JavaScript）
购书+阅读静态网页设计与实现一.主页设计HTML 1.效果展示及实现 2.完整代码二.主页样式布局CSS 三.空间功能实现Javascript 主要功能 Javascript完整代码: 总结购书 ...
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 目前,我们已经将一些行和列插入到表格中,并设置单元格的背景颜色,显示 RGB 值等. 例 7 ...

随机推荐

【Shell脚本学习10】Shell运算符：Shell算数运算符、关系运算符、布尔运算符、字符串运算符等
Bash 支持很多运算符,包括算数运算符.关系运算符.布尔运算符.字符串运算符和文件测试运算符. 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 expr,expr 最 ...
Java Script基础（七） HTML DOM模型
一.HTML DOM. HTML DOM的特性和方法是专门针对HTML的,HTML中的每个节点都是一个对象,通过访问属性和方法的方式,让一些DOM操作更加简便,在HTML DOM中有专门用来处理白哦个 ...
oracle PL/SQL（procedure language/SQL）程序设计之函数+过程+包
匿名PL/SQL块回顾 DECLARE (可选) 定义在PL/SQL块中要使用的对象BEGIN (必须) 执行语句EXCEPTION (可选) 错误处理语句END; (必须)匿名块( ...
正则转nfa：完成
太累了,感觉不会再爱了.问题已经解决,具体的懒得说了. #include "regular_preprocess.h" //这个版本终于要上nfa了,好兴奋啊 //由于连个节点之间 ...
最初步的正则表达式引擎:生成nfa
这个版本修改了前面版本的两个个bug. 第一个:识别到字符集的时候,只是将name_number加1,却并不对reg_pattern_table[name_number]进行初始化. 第二个:识别到假 ...
Sublime_Tip_01
//JerryWeb //20150601 //WebTool | Sublime ======= Sublime_Tip_01======= 接触了Sublime后,才真正开始爱上了coding # ...
fread 和 fwrite 函数用法示例以及注意事项
1.函数功能用来读写一个数据块. 2.一般调用形式 fread(buffer,size,count,fp); fwrite(buffer,size,count,fp); 3.说明 ( ...
杭电ACM2061--Treasure the new start, freshmen!
http://acm.hdu.edu.cn/showproblem.php?pid=2061 这题很简单.注意换行. <span style="font-size:18px;" ...
C++ 双链表基本操作
上一篇博客主要总结了单向链表,这次再总结一下双向链表. 1.概念双向链表也叫双链表,是链表的一种,它的每个数据结点中都有两个指针,分别指向直接后继和直接前驱.所以,从双向链表中的任意一个结点开始,都 ...
C++中delete[]是如何知道数组大小的
先看一段代码: int main(void) { int *pI = new int; int *pArray = new int[10]; int size = *(pArray-1); delet ...

原创的基于HTML/CSS/JavaScript的层级目录树

原创的基于HTML/CSS/JavaScript的层级目录树的更多相关文章

随机推荐

热门专题