一个可以无限扩展层次级的折叠菜单

来源:互联网 发布:服务器防护软件 编辑:程序博客网 时间:2024/04/29 03:54

<html>
<head>
<title>一个可以无限扩展层次级的折叠菜单 飘页 www.0738web.com</title>

</head>
<body>
<style type="text/css">  
#extend{width:300px;}  
li{border:1px solid #ddd;margin:3px;}  
.on ul{display:block;}  
.off ul{display:none;}
*{font-size:12px;} 
</style>  
一个可以无限扩展层次级的折叠菜单<br />  
<a href="http://www.0738web.com" target="_blank">http://www.0738web.com</a><br />  
<div id="extend">  
<ul>  
    <li><a href="#">中国</a>  
    <ul>  
        <li class="off"><a href="#">陕西</a>  
            <ul>  
                <li><a href="#">西安</a></li>  
                <li><a href="#">商洛</a></li>  
            </ul>  
        </li>  
        <li class="off"><a href="#">黑龙江</a>  
            <ul>  
                <li><a href="#">大庆</a></li>  
                <li><a href="#">鹤岗</a></li>  
            </ul>  
        </li>  
        <li><a href="#">安徽</a>  
            <ul>  
                <li><a href="#">黄山</a></li>  
                <li><a href="#">六安</a></li>  
            </ul>  
        </li>  
        <li><a href="#">广东</a>  
            <ul>  
                <li><a href="#">深圳</a>  
                    <ul>  
                        <li><a href="#">罗湖</a>  
                            <ul>  
                                <li><a href="#">地王大厦</a></li>  
                                <li><a href="#">国贸大厦</a></li>  
                            </ul>  
                        </li>  
                        <li><a href="#">福田</a></li>  
                    </ul>  
                </li>  
                <li><a href="#">广州</a></li>  
            </ul>  
        </li>  
    </ul>  
    </li>  
    <li><a href="#">美国</a>  
        <ul>  
            <li><a href="#">佛罗里达州</a></li>  
            <li><a href="#">俄勒冈</a></li>  
        </ul>  
    </li>  
</ul>  
</div>  
<script type="text/javascript">  
(function(){  
    var o=document.getElementById("extend");  
    var links=o.getElementsByTagName("a");  
    for(var i=0;i<links.length;i++){  
        links[i].i=i;  
        links[i].onclick=function(){  
            if(links[this.i].parentNode.className=="on"||links[this.i].parentNode.className==""){  
                links[this.i].parentNode.className="off";  
            }else{  
                links[this.i].parentNode.className="on";  
            }  
        }  
    }  
})();  
</script> 
</body>
</html>