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

来源：互联网发布：html 多选数据样式编辑：程序博客网时间：2024/06/07 07:00

    要做一个可以展开折叠的树状导航条，到网上看了一些实现，感觉都比较麻烦，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>

下面是效果演示：
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;}

+10

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