利用jQuery无插件创建可扩展目录树

这是一个简单、轻量级的，基于jQuery的目录树。纯html代码。

<html><head></head><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script>$( document ).ready( function( ) {    $( '.tree li' ).each( function() {        if( $( this ).children( 'ul' ).length > 0 ) {            $( this ).addClass( 'parent' );           }    });    $( '.tree li.parent > a' ).click( function( ) {        $( this ).parent().toggleClass( 'active' );        $( this ).parent().children( 'ul' ).slideToggle( 'fast' );    });    $( '#all' ).click( function() {        $( '.tree li' ).each( function() {            $( this ).toggleClass( 'active' );            $( this ).children( 'ul' ).slideToggle( 'fast' );        });    });});</script><style>body, a {    color: #3B4C56;    font-family: sans-serif;    font-size: 14px;    text-decoration: none;}#pgtitle{    margin: 0px 0px 20px;    font-size: 18pt;    text-align: center;}a{    cursor:pointer;}.tree ul {    list-style: none outside none;}.tree li a {    line-height: 25px;}.tree > ul > li > a {    color: #3B4C56;    display: block;    font-weight: normal;    position: relative;    text-decoration: none;}.tree li.parent > a {    padding: 0 0 0 28px;}.tree li.parent > a:before {    background-position: 25px center;     content: "|";    display: block;    height: 21px;    left: 0;    position: absolute;    top: 2px;    vertical-align: middle;    width: 23px;}.tree ul li.active > a:before {    background-position: 0 center;}.tree ul li ul {    border-left: 1px solid #D9DADB;    display: none;    margin: 0 0 0 12px;    overflow: hidden;    padding: 0 0 0 25px;}.tree ul li ul li {    position: relative;}.tree ul li ul li:before {    border-bottom: 1px dashed #E2E2E3;    content: "";    left: -20px;    position: absolute;    top: 12px;    width: 15px;}#wrapper {    margin: 0 auto;    width: 300px;}</style><body><div id="wrapper"><div class="tree">   <button id="all">Toggle All</button>                             <ul>        <li><a>第一级目录</a>            <ul>                <li><a>第二级目录</a></li>                <li><a>第二级目录</a></li>                <li><a>第二级目录</a></li>            </ul>        </li>        <li><a>第一级目录</a>            <ul>                <li><a>第二级目录</a>                    <ul>                        <li><a>第三级目录</a></li>                        <li><a>第三级目录</a></li>                        <li><a>第三级目录</a>                            <ul>                                <li><a>第四级目录</a></li>                                <li><a>第四级目录</a></li>                                <li><a>第四级目录</a>                                    <ul>                                        <li><a>第五级目录</a></li>                                        <li><a>第五级目录</a></li>                                        <li><a>第五级目录</a></li>                                    </ul>                                </li>                            </ul>                        </li>                    </ul>                </li>                <li><a>第二级目录</a></li>            </ul>        </li>        <li><a>第一级目录</a>            <ul>                <li><a>第二级目录</a></li>                <li><a>第二级目录</a></li>            </ul>        </li></ul></div></div></body></html>