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

xiaozmn

浏览: 358170 次
性别:
来自: 保定

最近访客更多访客>>

Bravefrank

搜云库

cmmjava

tommy1860

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

div+css

CSS JavaScript Blog .net HTML

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>

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

转载于：http://blog.csdn.net/dyingcow/archive/2006/09/20/1255794.aspx

分享到：

flash遮盖div层在IE和FF下解决办法 | overflow解决float浮动后高度自适应问题

2009-07-16 13:31
浏览 1409
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论