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

时间：2008-05-16 来源：tunir

<html>

<style type="text/css">
div.show{
    display:block;
    width:100%;
    background-color:#339966;
}
div.hidden{
    display:none;
}

span.fold{
    width:20px;

    padding:0px 10px 0px 10px;
    background-image:url("P1.gif");
    background-repeat:no-repeat;

}
span.expend{
    width: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;

    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>
（由于展开和收起的图标使用的相对链接，利用改变span的className属性来改变图标，在blog里不方便实用，暂且用+代替原来图表的位置，大家使用的时候可以用你自己的图标代替M1.gif 、P1.gif、D.gif，和你的页面放在一层文件夹下即可）
转载于：http://blog.csdn.net/dyingcow/archive/2006/09/20/1255794.aspx

相关阅读更多 +