您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > HTML5&CSS3

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

作者:UncleToo  来源:原创  日期:2014-03-27 8:02:04
收藏  评论:( 2 )  阅读:1452

本文将给大家展示一个不使用任何插件,纯用HTML+CSS+jQuery创建一个可扩展的目录树结构,看看最终效果:

HTML代码:

<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>


jQuery代码:

$( 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' );
        });
    });
});


CSS代码:

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-image: url("../images/plus_minus_icons.png");
    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;
}


这是一个简单、轻量级的目录树,大家可以继续优化优化。



除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/html5/883.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论