简单的几句JQuary搞定手风琴特效
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>accordion </title>
<script src="jquery-1.6.1.min.js"></script>
<style>
.info { padding: 10px;margin: 20px;background-color: #fff;border:#dddddd solid 1px;width:1005px;height:390px;}
.info div { display: inline;float: left;}
.indexlist { height: 325px;position: relative;display: inline;float: left;}
.indexlist .slide { display: none;float: left;width: 700px;position: relative;padding: 0 10px 10px;
color: #fff;height: 380px;}
.slide_table{ color:#000;border-collapse: collapse;}
.handle { width:120px;height:390px;background:#CCC;color:#000;margin-left:10px;margin-right:10px;}
.handle:hover { cursor:pointer;}
.indexlist a.a1 { width:120px;text-align: center;display: inline;float: left;margin: auto;-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;-ms-transition: 0.3s ease-in-out;}
.indexlist a span { float: left;padding-top: 120px;width: 120px; line-height:35px;font-size:18px; color:#000; font-family:"微软雅黑";}
.slide td { font-size:12px;}
.slide h3 { color:#666;}
</style>
</head>
<body>
<script type="text/javascript">
/*手风琴特效*/
$(document).ready(function(){
$(".handle").click(function(){//class包含handle的结点的点击事件
if(!$(this).siblings(".slide").is("visible")){//如果当前结点的兄弟结点class包含slide的结点是隐藏的
$(this).animate({width:"hide"},10);//当前结点以十毫秒速度隐藏
$(this).parent().siblings().children(".handle").animate({width:"show"},600);//查找当前结点的父节点的兄弟节点的class包含handle的孩子结点，让他们以600ms速度显示
$(this).siblings(".slide").animate({width:"show"},600);//当前结点的兄弟结点的class包含slide的结点以600ms速度显示
$(this).parent().siblings().children(".slide").animate({width:"hide"},10);//查找当前结点的父节点的兄弟节点的class包含slide的孩子结点，让他们以10ms速度隐藏
}
})
})
</script>
<div class="info">
<div class="indexlist">
<div class="handle">
<a class="a1" href="#p1"><span>(1)云南鲁甸地震各省份党委政府捐助情况一览（单位：万元）</span></a>
</div>
<div class="slide">
<table align="center" style="width: 500px;" border="2" class="slide_table">
<th colspan="2">云南鲁甸地震各省份党委政府捐助情况一览</th>
<tr>
<td style="text-align: center;">省份</td>
<td style="text-align: center;">款物</td>
</tr>
<tr>
<td style="text-align: center;">北京</td>
<td style="text-align: center;">1000</td>
</tr>
<tr>
<td style="text-align: center;">天津</td>
<td style="text-align: center;">1000</td>
</tr>
<tr>
<td style="text-align: center;">山西</td>
<td style="text-align: center;">500</td>
</tr>
<tr>
<td style="text-align: center;">上海</td>
<td style="text-align: center;">1000</td>
</tr>
<tr>
<td style="text-align: center;">江苏</td>
<td style="text-align: center;">1000</td>
</tr>
<tr>
<td style="text-align: center;">安徽</td>
<td style="text-align: center;">500</td>
</tr>
<tr>
<td style="text-align: center;">福建</td>
<td style="text-align: center;">300</td>
</tr>
<tr>
<td style="text-align: center;">江西</td>
<td style="text-align: center;">300</td>
</tr>
<tr>
<td style="text-align: center;">山东</td>
<td style="text-align: center;">500</td>
</tr>
<tr>
<td style="text-align: center;">广东</td>
<td style="text-align: center;">1000</td>
</tr>
<tr>
<td style="text-align: center;">广西</td>
<td style="text-align: center;">1000</td>
</tr>
<tr>
<td style="text-align: center;">重庆</td>
<td style="text-align: center;">1000</td>
</tr>
<tr>
<td style="text-align: center;">四川</td>
<td style="text-align: center;">1500</td>
</tr>
</table>
</div>
</div>
<div class="indexlist">
<div class="handle" style="display:none">
<a class="a2" href="#p2" ><span>(2)各方捐助云南鲁甸地震</span></a>
</div>
<div class="slide" style="display:block">
<table border="2" class="slide_table">
<th colspan="4">仍有很多企业和个人未统计完全</th>
<tr>
<td>恒大为云南地震捐1000万元200万瓶矿泉水</td>
<td>万达集团捐款1000万元人民币</td>
<td>海尔捐赠600万人民币</td>
<td>李嘉诚捐款3000万</td>
</tr>
<tr>
<td>周杰伦捐款50万</td>
<td>韩红爱心慈善基金会捐款100万元人民币</td>
<td>京东捐款500万</td>
<td>当当网捐款100万</td>
</tr>
<tr>
<td>黄晓明捐款10万元</td>
<td>山西省捐款500万元</td>
<td>阿里巴巴捐赠500万元人民币</td>
<td>腾讯慈善基金会捐款500万人民币</td>
</tr>
<tr>
<td>百度基金会捐款500万人民币</td>
<td>云南省烟草专卖局(公司)、云南中烟工业有限责任公司各捐款1000万元人民币，合计2000万元人民币</td>
<td>迅雷捐款100万</td>
<td>360捐款300万</td>
</tr>
<tr>
<td>伊利集团向云南地震灾区捐赠500万</td>
<td>腾讯公司宣布向云南地震灾区捐款500万</td>
<td>台湾同胞投资企业联谊会捐款200万元人民币</td>
<td>北京市台湾同胞投资企业协会捐款100万元人民币</td>
</tr>
<tr>
<td>旺旺集团捐款200万元人民币</td>
<td>广药集团王老吉捐出200万款物</td>
<td>劲牌公司 捐款100万</td>
<td>洽洽食品 物品4000箱洽洽早餐派</td>
</tr>
<tr>
<td>小米捐款100万元</td>
<td>娃哈哈 捐赠20万瓶富氧水和25万瓶红飘纯净水</td>
<td>蒙牛集团 紧急援助2274箱牛奶</td>
<td>中脉集团 捐赠30万元</td>
</tr>
<tr>
<td>四川捐款1500万，还派出大量医疗队和救灾物资</td>
<td>山东累计捐款1200万</td>
<td>太平洋保险捐款500万元</td>
<td>四川捐款1500万，还派出大量医疗队和救灾物资</td>
</tr>
<tr>
<td>王守义十三香集团捐款500万元</td>
<td>加多宝集团通过中国扶贫基金会第一时间运送200顶备灾帐篷，并紧急向地震灾区和昆仑山矿泉水等救灾物资</td>
<td>安利捐赠100万元</td>
<td>游族网络捐款200万</td>
</tr>
<tr>
<td>维族"切糕王子"捐赠1万斤切糕</td>
<td>佳能捐款320万元</td>
<td>国美捐款500万元</td>
<td>东航集团捐款2000万元</td>
</tr>
<tr>
<td>大众点评捐50万元</td>
<td>五粮液400万捐赠灾区</td>
<td>麦当劳捐款200万元</td>
<td>安利捐赠100万元</td>
</tr>
<tr>
<td>安踏捐赠500万</td>
<td>越秀地产捐赠300万</td>
<td>亿嘉控股捐500万</td>
<td>安徽捐赠救灾资金500万</td>
</tr>
</table>
</div>
</div>
<div class="indexlist">
<div class="handle">
<a class="a3" href="#p3"><span>(3)天灾无情，人间有爱</span></a>
</div>
<div class="slide">
<h3> 截至8月10日17时，云南省共接收昭通鲁甸地震捐款47863.79万元，捐物价值14021.06万元。天灾无情，人间有爱!</h3>
</div>
</div>
</div>
</body>
</html>
扫一扫
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
