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

　　之前参加过一些基于HTML/CSS/JavaScript的项目，当在页面中需要生成一颗目录树时，总是首先想着网上有没有现成的生成树的源代码，比如dtree、zthee,或者使用一些javascript框架类库（比如目前Dojo和ExtJs）自带的树模型或插件。

　　今天趁项目不是很紧，有时间可以自己考虑原创一颗树，完成这个小的尝试后想想不是很难，效果如下：

<!--
/*主页面样式*/
.leftNav {
width: 20%;
height:auto;
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;
}
-->

目录节点一

二级叶子结点一
二级叶子结点二

叶子结点一
叶子结点二
叶子结点三
叶子结点四
叶子结点五
叶子结点六

目录节点二

叶子结点一
叶子结点二
叶子结点三
叶子结点四
叶子结点五

　　如果您觉得我做的目录树效果不怎么样，您可以去投靠上面我提到的现成的做法，可以不用继续阅读本文。
　　上面示例的原代码如下，为了保持完整性，我没有将代码中德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的层级目录树

原创的基于HTML/CSS/JavaScript的层级目录树的相关教程结束。

相关推荐

ASP页面中怎么嵌入JavaScript或CSS

如何使用HTML+CSS+JS制作3D立方体图像库

HTML文件中怎么用import引入js模块

部署vue项目找不到js和css文件如何解决

软件开发目录

怎么用JS、CSS和HTML实现注册页面

CSS如何强制图片自适应大小

springboot themaleaf第一次进页面不加载css怎么解决