JQ----树杈型导航

简单的做了一个树杈型的导航结构如下所示：

废话不多说，上代码：

HTML：

<div class="wrapper">
    <div class="tabtree">
        <ul>
            <li>
                <a href="#">标题一</a>
                <ul>
                    <li>
                        <a href="#">二级标题一</a>
                        <ul>
                            <li>
                                <a href="#">三级标题一</a>
                            </li>
                            <li>
                                <a href="#">三级标题二</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">二级标题二</a>
                    </li>
                    <li>
                        <a href="#">二级标题三</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">标题二</a>
                <ul>
                    <li>
                        <a href="#">二级标题一</a>
                    </li>
                    <li>
                        <a href="#">二级标题二</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">标题三</a>
            </li>
            <li>
                <a href="#">标题四</a>
                <ul>
                    <li>
                        <a href="#">二级标题一</a>
                    </li>
                    <li>
                        <a href="#">二级标题二</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">标题五</a>
            </li>
        </ul>
    </div>    
</div>

CSS：

<style type="text/css">
*{
    margin: 0; 
    padding: 0; 
    border: 0; 
    color: #000; 
}
a{text-decoration: none;}

.tabtree{
    width: 130px;
    margin: 20px auto;
    line-height: 35px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 10px;
}
.tabtree li{ list-style: none;}
.tabtree ul li ul{
    padding: 0 0 0 20px;
    line-height: 24px;
    font-size: 12px;
}
.tabtree li a{
    display: block;
    padding-left: 12px;
}
.tabtree li a{ background: url(images/open.png) no-repeat left center;}
.tabtree li ul{ display: none;}
li.close>a{ background: url(images/close.png) no-repeat left center;}

</style>

p.s.这里用到了li.close > a 这个属性IE6不支持。如果想要IE6也支持，建议背景图的地方单独写一个标签，通过变换Class来实现。

JQ来啦：

<script type="text/javascript">
    $(function(){
        $("li a").click(function(){
            if($(this).parent("li").hasClass("close")){
                $(this).parent("li").removeClass("close");
                $(this).next("ul").css("display","");
            }else{
                $(this).parent("li").addClass("close");
                $(this).next("ul").css("display","block");
            };
            
        });
    });
    
</script>

哈~效果完成！走在JQ的路上，仍在继续。。。