树状结构导航条css+javascript简单实现

最新推荐文章于 2025-06-01 16:28:42 发布

最新推荐文章于 2025-06-01 16:28:42 发布 · 181 阅读

文章标签：

本文介绍了一种简单的树状导航条实现方案，通过少量的JavaScript代码实现了节点的展开与折叠功能，并支持动态生成树结构。

    要做一个可以展开折叠的树状导航条，到网上看了一些实现，感觉都比较麻烦，js的代码量都不小，我的应用要求不复杂，但是要求树状结构的内容是可以改变的。所以最后还是自己试着写了一个。
    下面是演示代码，你可以按照自己的需求改变div中的内容，动态的生成div部分代码就可以实现tree结构的动态建立。

<html>
<script>
    function changevisible(element){
        var children = element.parentNode.childNodes;
        for(var i= 0; i<children.length;i++){
            if(children[i].nodeName == "DIV"){
                var className = children[i].className;
                if(className == "show"){
                    element.className="fold";
                    children[i].className="hidden";
                }
                else{
                    element.className="expend";
                    children[i].className="show";
                }
            }
        }
    }
</script>
<style type="text/css">
div.show{
    display:block;
    width:100%;
    background-color:#339966;
}
div.hidden{
    display:none;
}

span.fold{
    width:20px;
    height:20px;
    padding:0px 10px 0px 10px;
    background-image:url("P1.gif");
    background-repeat:no-repeat;

}
span.expend{
    width:20px;
    height:20px;
    padding:0px 10px 0px 10px;
    background-image:url("M1.gif");
    background-repeat:no-repeat;
}
span.2blank{
    width:20px;
}
span.3blank{
    width:40px;
}
span.def{
    width:20px;
    height:20px;
    padding:0px 10px 0px 10px;
    background-image:url("D.gif");
    background-repeat:no-repeat;
}
</style>
    <body>
        <div id="sidenav">
            <div class="show"><span class="fold" onclick="changevisible(this)"> </span>10
                <div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>20</div>
                <div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>21</div>
                <div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>22
                    <div class="hidden"><span class="3blank">  </span><span class="def"> </span>30</div>
                    <div class="hidden"><span class="3blank">  </span><span class="def"> </span>31</div>
                </div>
            </div>
        </div>
    </body>
</html>

下面是效果演示：
<script> function changevisible(element){ var children = element.parentNode.childNodes; for(var i= 0; i<children.length;i++){ if(children[i].nodename="=" "div"){="" var="" classname="children[i].className;" if(classname="=" "show"){="" element.classname="fold" ;="" children[i].classname="hidden" ;="" }="" else{="" element.classname="expend" ;="" children[i].classname="show" ;="" }="" }="" }="" }<="" script=""> <style type="text/css">div.show{ display:block; width:100%; background-color:#339966;}div.hidden{ display:none;}span.fold{ width:20px; height:20px; padding:0px 10px 0px 10px; background-image:url("P1.gif"); background-repeat:no-repeat; }span.expend{ width:20px; height:20px; padding:0px 10px 0px 10px; background-image:url("M1.gif"); background-repeat:no-repeat;}span.2blank{ width:20px;}span.3blank{ width:40px;}span.def{ width:20px; height:20px; padding:0px 10px 0px 10px; background-image:url("D.gif"); background-repeat:no-repeat;}</style>

+10

（由于展开和收起的图标使用的相对链接，利用改变span的className属性来改变图标，在blog里不方便实用，暂且用+代替原来图表的位置，大家使用的时候可以用你自己的图标代替M1.gif 、P1.gif、D.gif，和你的页面放在一层文件夹下即可）