【大牛来帮忙看看如何实现这种效果】

http://law.wkinfo.com.cn/search/process?real_collection=&s.ac.hitsPerPage=10&reserved_query=&hiddenTeaser=&collection=legislation&free=0&mode=simple&s.sm.query=
这个网址 法律法规 左侧那个树 具体是如何实现的……请大牛们 谁能给我讲一讲  如何下手做 谢谢了

解决方案 »

  1.   

    写了个简单的类似你要的效果，你可以看下：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>菜单下拉效果</title>
    <script src="jquery-1.6.4.min.js"></script>
    <script>
    $(function(){
    var arr = new Array(
    'http://pic3.nipic.com/20090514/2655062_101928007_2.jpg',
    'http://pic3.nipic.com/20090515/2655062_144357016_2.jpg',
    'http://pic3.nipic.com/20090513/2350219_100249026_2.jpg',
    'http://pic3.nipic.com/20090514/2239339_213655024_2.jpg',
    'http://pic1.nipic.com/2009-02-23/20092239279614_2.jpg');
    for(var i=0;i<5;i++){
    var obj = '<div><div class="title">标题'+(i+1)+'</div><div class="content"><img src='+arr[i]+' /></div></div>';
    $('.all').append(obj);
    }
    var _obj1=null;
    var _obj2=null;
    $('.content').hide();
    $('.title').click(function(){
    if(_obj1!=null)_obj1.hide();//隐藏上一个
    if(_obj2!=null)_obj2.removeClass('newtitle').addClass('title');//还原上一个的样式

    _obj1 = $(this).parent().find('.content');//找到当前title下边的content
    _obj2 = $(this);//当前的title
    _obj2.removeClass('title').addClass('newtitle');//改变当前content的样式

    var width_str = $('.all').css('width');//获取class='all'的宽度
    var height_str = _obj1.css('height');//获取class='content'的高度
    var width = width_str.substr(0,width_str.length-2);//去掉'px'
    var height = height_str.substr(0,height_str.length-2);//去掉'px'

    //改变当前img的width、height、添加图片的title值、注册单击事件
    _obj1.find('img').attr('width',width).attr('height',height)
    .attr('title','点击查看图片地址')
    .click(function(){alert($(this).attr('src'));});

    _obj1.show(300);//显示当前title下边的content
    }).mouseover(function(){
    $(this).css('cursor','pointer').removeClass('title').addClass('move');
    }).mouseout(function(){
    $(this).removeClass('move').addClass('title');
    })
    })
    </script>
    <style>
    .all{
    width: 200px;
    border-left: solid #5bb2e2 1px;
    border-top: solid #5bb2e2 1px;
    border-right: solid #5bb2e2 1px;
    }
    .title{
    color:black;
    background-color:#e5ecf9;
    }
    .newtitle{
    color:white;
    background-color:InactiveCaption;
    }
    .title,.newtitle,.move{
    font-size: 16px;
    font-family:华文隶书;
    padding: 2px;
    text-align: center;
    border-bottom: solid #5bb2e2 1px;
    }
    .content{
    background-color: #cce8cf;
    height: 220px;
    padding-top: 1px;
    padding-bottom: 1px;
    }
    .move{
    background-color:silver;
    }
    </style>
    </head><body>
    <div class="all"></div>
    </body>
    </html>