js树形导航栏 jquery

效果：

/**
 * @author Administrator
 */
$(document).ready(function(){
    
    init();
    
});
function init(){    
    $("#firstDd").slideDown();
    everyDd(".topTitle");
}
function everyDd(obj){
    $(obj).each(function(){
        var theSpan = $(this);
        theSpan.bind("click",function(){
            showHide(theSpan);
        });        
    });
}
function showHide(obj){
    
    $("dd").slideUp();
    $("dt a").removeClass("minus");    
    obj.next("dd").slideDown();
    obj.find("a").addClass("minus");                        

}

*{
    margin:0;
    padding:0;
    list-style-type:none;
    color:black;
    text-decoration: none;
}
html,body{
    width:100%;
    height:100%;
}
nav.nav_menu{
    width:400px;
    height: 700px;
    margin : 0 auto;
}
nav.nav_menu dl{
    width:100%;
    height: 100%;
}
nav.nav_menu dt{
    width:100%;
    height:8%;
    background-color: #E7F5FC;
}
nav.nav_menu dt a{
    margin:0 auto;
    display:block;
    width:100%;
    height:59%;
    padding-top:6%;
    border-left: 1px solid #83BBD9;
    border-right: 1px solid #83BBD9;
    text-align: center;
    background: #93BFDB; /* 为较旧的或者不支持的浏览器设置备用属性 */
    background: -moz-linear-gradient(top, #DEE8ED, #8ED1FC 80%);
    background: -webkit-gradient(linear, 0 0, 0 80%, from(#DEE8ED), to(#8ED1FC));
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#DEE8ED', endColorstr='#8ED1FC'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#DEE8ED', endColorstr='#8ED1FC')"; /* IE8 */

}
nav.nav_menu dt a:hover{color:#3366cc;}
nav.nav_menu dl dd {
    display: none;
    width: 80%;
    margin : 0 auto;
}
nav.nav_menu dd ul>li{
    height: 50px;
    line-height:50px;
    text-align: center;
    border: 1px solid #D0D6DD;
    
}
nav.nav_menu dd ul>li a:hover{
    color:green;
    font-weight: bold;
}
.minus{
    font-weight: bold;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link type="text/css" href="css/2.css" rel="stylesheet">
        <script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
        <script type="text/javascript" src = "js/2.js"></script>
    </head>
    <body>
        <nav class="nav_menu">
            <dl> 
                <dt class="topTitle"><a href="javascript:void(0);" class="minus">应用商城管理</a></dt> 
                <dd id="firstDd"> 
                    <ul>
                        <li><a href="javascript:void(0);">应用管理</a></li>
                        <li><a href="javascript:void(0);">类别管理</a></li>
                        <li><a href="javascript:void(0);">海报管理</a></li>
                        <li><a href="javascript:void(0);">公告管理</a></li>
                        <li><a href="javascript:void(0);">信息统计</a></li>
                    </ul>
                </dd> 
                <dt class="topTitle"><a href="javascript:void(0);" >开发者社区管理</a></dt> 
                <dd> 
                    <ul>
                        <li><a href="javascript:void(0);">消息管理</a></li>    
                        <li><a href="javascript:void(0);">应用上下架管理</a></li>
                        <li><a href="javascript:void(0);">开发者管理</a></li>
                        <li><a href="javascript:void(0);">社区资源管理</a></li>
                    </ul> 
                </dd> 
                <dt class="topTitle"><a href="javascript:void(0);" >管理员账号管理</a></dt> 
                <dd> 
                    <ul>
                        <li><a href="javascript:void(0);">账号管理</a></li>    
                        <li><a href="javascript:void(0);">权限管理</a></li>
                    </ul> 
                </dd>
            </dl> 
        </nav>
            
    </body>
</html>

下载地址：https://files.cnblogs.com/qduanlu/%E5%AF%BC%E8%88%AA%E6%A0%8F.rar