Edit in JSFiddle

<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>

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);
}

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;
}