【大牛来帮忙看看怎么实现这种效果】
日期：2014-05-16 浏览次数：20485 次
【大牛来帮忙看看如何实现这种效果】
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=
这个网址 法律法规 左侧那个树 具体是如何实现的……请大牛们 谁能给我讲一讲 如何下手做 谢谢了
------解决方案--------------------
就是树形控件啦，那就要看你用什么工具开发了啊
------解决方案--------------------
写了个简单的类似你要的效果，你可以看下：
<!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>
------解决方案--------------------
这种简单2级的树形控件你网上搜一下很多的
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=
这个网址 法律法规 左侧那个树 具体是如何实现的……请大牛们 谁能给我讲一讲 如何下手做 谢谢了
------解决方案--------------------
就是树形控件啦，那就要看你用什么工具开发了啊
------解决方案--------------------
写了个简单的类似你要的效果，你可以看下：
<!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>
------解决方案--------------------
这种简单2级的树形控件你网上搜一下很多的
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
