js树形导航栏 jquery
生活随笔
收集整理的這篇文章主要介紹了
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>?下載地址：http://files.cnblogs.com/qduanlu/%E5%AF%BC%E8%88%AA%E6%A0%8F.rar
轉載于:https://www.cnblogs.com/qduanlu/archive/2012/12/21/2827560.html
總結
以上是生活随笔為你收集整理的js树形导航栏 jquery的全部內容，希望文章能夠幫你解決所遇到的問題。
