发布日期：2012-08-12     点击：

<style type="text/css">
.demo_side{width:270px; padding:10px; background:#292E31;}
.demo_side ol{overflow:hidden; height:22px; line-height:22px; color:#CCC;}
.demo_side .level1 a,.demo_side .level2 a,.demo_side .level3 a{color:#CCC;}
.demo_side ol a:hover{color:#F00;}
.demo_side .level1{font-weight:bold; padding:0 0 0 16px;} /* 一级类别 */
.demo_side .level2{padding:0 0 0 40px; background:url(inc/uploads/ckeditor/son_line.gif) 25px 12px no-repeat; display:none;}
.demo_side .level3{padding:0 0 0 80px; background:url(/inc/uploads/ckeditor/son_line.gif) 65px 12px no-repeat; display:none;}
.demo_side .closed{background:url(inc/uploads/ckeditor/closed.gif) 0 2px no-repeat;}
.demo_side .open{background:url(inc/uploads/ckeditor/open.gif) 0 2px no-repeat;}
</style>

<div class="demo_side">
    {:foreach category::data(2) as $c:}
        {:if $c['level'] == 1:}
        <ol class="level{:$c['level']:} img_{:category::cut($c['nexus'],1):} closed">
            <a href="javascript:_f({:$c['id']:});">{:$c['title']:}</a>
        </ol>
        {:else:}
        <ol class="level{:$c['level']:} show_{:category::cut($c['nexus'],1):}">
            <a href="{:$c['URL']:}">{:$c['title']:}</a>
        </ol>
        {:/if:}
    {:/foreach:}
</div>

<script type="text/javascript">
var _f = function(id){
    var v = $('.show_' + id); var m = $('.img_' + id);
    if(v.css('display') == 'none'){v.show(); m.removeClass('closed'); m.addClass('open');
    } else {v.hide(); m.removeClass('open'); m.addClass('closed');}
}
</script>