jQuery树状导航条·

虽然是在别人的帮助下完成的 但是我依然很有成就感，OE_YEAH
jQuery代码

Code
$(document).ready(function(){
        $(".subnav dd").css("display","none");                   
        $(".subnav dt span").addClass("imgdt2");
        $(".subnav dt span:first").removeClass("imgdt2");
        $(".subnav dt span:first").addClass("imgdt1");
        $(".subnav dd:first").css("display","block");
        $(".subnav dt").click(function(){
        $(".subnav dd").css("display","none");
        $(this).next("dd").css("display","block");
        $(".subnav dt span").removeClass();
        $(".subnav dt span").addClass("imgdt2");
        $(this).children("span").removeClass();
        $(this).children("span").addClass("imgdt1");
        
});    

CSS

Code
.subnav{border:1px solid #CDCDCD; border-top:none; display:block; margin:10px; line-height:24px;}
.subnav dt{ background:url(../images/subnavdt.jpg) repeat-x; height:29px; line-height:29px; font-weight:bolder;
color:#417AA3; padding-left:14px;  display:block; cursor:pointer;}
.subnav dt a{color:#417AA3;}
.subnav dt .imgdt1{float:right; margin:10px 15px; background:url(../images/show.gif) no-repeat; width:9px; height:8px;}
.subnav dt .imgdt2{float:right; margin:10px 15px; background:url(../images/hidden.gif) no-repeat; width:9px; height:8px;}
.subnav dd{ clear:both;}
.subnav dd ul li{background:url(../images/subnavdd.gif) no-repeat left center; margin-left:15px; padding-left:15px;}
.subnav a{color:#000000;}

HTML

Code
<dl class="subnav">
                    <dt><span></span><a href="#" target="_blank">头部</a></dt>
                    <dd style="display:block;">
                    <ul>
                    <li><a href="#" target="_blank">鼻</a></li>
                    <li><a href="#" target="_blank">耳</a></li>
                    <li><a href="#" target="_blank">喉</a></li>
                    <li><a href="#" target="_blank">眼</a></li>
                    </ul>
                    </dd>
                    <dt><span></span><a href="#" target="_blank">颈部</a></dt>
                    <dd>
                    <ul>
                    <li><a href="#" target="_blank">鼻</a></li>
                    <li><a href="#" target="_blank">耳</a></li>
                    <li><a href="#" target="_blank">喉</a></li>
                    <li><a href="#" target="_blank">眼</a></li>
                    </ul>
                    </dd>
                    <dt><span></span><a href="#" target="_blank">腰部</a></dt>
                    <dd>
                    <ul>
                    <li><a href="#" target="_blank">鼻</a></li>
                    <li><a href="#" target="_blank">耳</a></li>
                    <li><a href="#" target="_blank">喉</a></li>
                    <li><a href="#" target="_blank">眼</a></li>
                    </ul>
                    </dd>
                    <dt><span></span><a href="#" target="_blank">腹部</a></dt>
                    <dd>
                    <ul>
                    <li><a href="#" target="_blank">鼻</a></li>
                    <li><a href="#" target="_blank">耳</a></li>
                    <li><a href="#" target="_blank">喉</a></li>
                    <li><a href="#" target="_blank">眼</a></li>
                    </ul>
                    </dd>
                    <dt><span></span><a href="#" target="_blank">胸部</a></dt>
                    <dd>
                    <ul>
                    <li><a href="#" target="_blank">鼻</a></li>
                    <li><a href="#" target="_blank">耳</a></li>
                    <li><a href="#" target="_blank">喉</a></li>
                    <li><a href="#" target="_blank">眼</a></li>
                    </ul>
                    </dd>
                 
                   
                    
                    
                </dl>

转载于:https://www.cnblogs.com/pope/archive/2009/08/04/1538845.html