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

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

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

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #class #fold #div #url

技术笔记专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种简单的实现树状导航条的方法，通过修改div元素的内容和使用JavaScript控制显示隐藏，可以轻松创建动态的树状结构导航条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

下面是效果演示：

+10

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