一个简单的折叠菜单

　　效果：

　　代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title> New Document </title>
    <style type="text/css">
        body,ul,li{
            maring:0;
            font-size:12px;
            padding:0;
        }
        ul{
            list-style:none;
            line-height:25px;
        }
        #test{
            border:1px solid #888;
            border-radius:5px;
            width:200px;
        }
        dt{
            background:#EEE;
            padding:5px;
            padding-left:20px;
            border-bottom:1px solid #CCC;
            border-top:1px solid #BBB;
            margin-bottom:-1px;
        }
        dt span{
            float:right;
        }
        dt span:hover{
            cursor:pointer;
            color:red;
        }
        dd{
            margin-left:25px;
        }
        .first-dt{
            -webkit-border-top-left-radius:5px;
            -webkit-border-top-right-radius:5px;
            -moz-border-radius-topleft:5px;
            -moz-border-radius-topright:5px;
            border-top-left-radius:5px;
            border-top-right-radius:5px;
            border-top:0;
        }
        .last-dt{
            -webkit-border-bottom-left-radius:5px;
            -webkit-border-bottom-right-radius:5px;
            -moz-border-radius-bottomleft:5px;
            -moz-border-radius-bottomright:5px;
            border-bottom-left-radius:5px;
            border-bottom-right-radius:5px;
            margin-bottom:0;
            border-bottom:none;
        }
    </style>
</head>
<body>
    <div id="test">
        <dt class="first-dt"><span>隐藏</span>开发资源</dt>
        <dd>
            <ul>
                <li><a href="#">首页</a></li>
            </ul>
        </dd>        
        <dt><span>隐藏</span>接入指南</dt>
        <dd>
            <ul>
                <li><a href="#">移动客户端接入</a></li>
            </ul>
        </dd>
        <dt id="last_dt"><span>隐藏</span>开发文档</dt>
        <dd>
            <ul>
                <li><a href="#">应用社区API</a></li>
                <li><a href="#">二维码API</a></li>
                <li><a href="#">WO+分享API</a></li>
            </ul>
        </dd>
    </div>
    <script type="text/javascript">
        var dts=document.getElementsByTagName("dt");
        for(var i=0,j=dts.length;i<j;i++){
            var menu=dts[i].getElementsByTagName("span")[0],
                nextDD=dts[i].nextSibling;
            while(nextDD.nodeType != 1){
                nextDD=nextDD.nextSibling;
            }
            menu.onclick=(function(obj){
                return function(){
                    if(this.innerHTML=="隐藏"){
                        this.innerHTML ="展开";
                        obj.style.display="none";
                        if(this.parentNode.id=="last_dt"){
                            this.parentNode.className="last-dt";
                        }
                    } else{
                        this.innerHTML="隐藏";
                        obj.style.display="block";
                        if(this.parentNode.id=="last_dt"){
                            this.parentNode.className="";
                        }
                    }
                }
            })(nextDD);
        }
    </script>
</body>
</html>

　　注：圆角效果没有对IE678作处理。

posted @ 2012-09-17 16:16  草根程序猿  阅读(1512)  评论(0)  编辑  收藏  举报