jquery 列表伸缩特效
1、首先上图看一下效果是什么样的。
2、接着我们要准备的东西,jquery的脚本文件，可以去网上下载。
jquery-1.8.3.min.js，还要就是要用到的图片
3、在head 标签里引用jquery。
4、html页面的代码结构,这里做个演示，所以测试数据就用两条吧
<div id="ygHrListBox">
<table cellspacing="1" cellpadding="0
<tbody id="tbJob">
<tr>
<th width="300">职位名称</th>
<th width="100">职位类别</th>
<th width="200">工作地点</th>
<th width="70">招聘人数</th>
<th width="120">发布时间</th>
<th width="38"> </th>
</tr>
<tr>
<td>博士后</td>
<td align="center">研发类</td>
<td align="center">珠海,北京,武汉</td>
<td align="center">10</td>
<td align="center">2016-4-20</td>
<td align="center"><a href="javascript:void(0)" class="ygHrMup">更多</a></td>
</tr>
<tr class="ygHrMore">
<td colspan="6">
<h5></h5>
1、已获得或在入站前将获得受教育认可的正规院校博士学位，入站后能够保证全职从事博士后研究；<br>
2、计算机、信息管理、财务、金融、数学、电力等研究方向；<br>
3、品学兼优，身体健康，年龄在35周岁以下，有多篇国内外学术期刊或者会议上发表论文。<br>
<p class="ygBodyHrSub"><a href="http://jobs.ygsoft.com/yghr/user/user_login.asp" title="填写申请职位表">申请职位</a>
</td>
</tr>
<tr>
<td>售前咨询顾问</td>
<td align="center">营销类</td>
<td align="center">珠海,北京,武汉</td>
<td align="center">2</td>
<td align="center">2016-4-20</td>
<td align="center"><a href="javascript:void(0)" class="ygHrMup">更多</a></td>
</tr>
<tr class="ygHrMore">
<td colspan="6">
<h5></h5>
1、熟悉国内外最新的企业管理发展趋势，对于大型集团的管理理念、方法、流程熟悉，熟悉集团财务、供应链管理、工程项目管理、审计管理其中之一并在此领域工作多年。<br>
2、具有有大型企业咨询、审计及售前顾问经验；拥有内部审计监控、风险、内控、财务、数据分析等项目实务操作经验或具有咨询、外部审计经验<br>
3、有电力行业背景，持有注册会计师证书、注册内部审计师、项目管理认证等资格证书优先考虑；<br>
4、熟悉管理软件（财务管理、ERP、供应链、风险与内控、营销、物资）的设计、分析、实施、应用或维护等经验优先考虑；<br>
5、有咨询公司、软件企业售前经验优先<br>
<p class="ygBodyHrSub"><a href="http://jobs.ygsoft.com/yghr/user/user_login.asp" title="填写申请职位表">申请职位</a>
</td>
</tr>
</tbody>
</table>
</div>
5、页面布局css ，样式设定：
首先table :
/*table 基本设定*/
table {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
display: table;
border-collapse: separate;
}
tr:nth-of-type(odd) {
background: #eee;
margin: 1px;
padding: 0 10px;
}
tr, th, td, input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
td {
padding: 5px;
line-height: 20px;
font-size: 12px;
border-bottom: 1px solid #ccc;
position: relative;
}
tr:hover {
background: #CFE7F8;
color: #000;
}
th {
background-color: #A9D0EC;
color: #000;
border-bottom: 1px solid #6BA4CB;
height: 35px;
line-height: 35px;
text-align: center;
padding: 0 5px;
}
/*外面框架div*/
#ygHrListBox {
margin: 20px 0 0 0;
width: 830px;
}
/*触发特效的按钮*/
a {
color: #0655a4;
text-decoration: none;
}
/*伸缩特效css*/
.ygHrMore {
display: none;
}
.ygHrMore1 {
display: table-row;
}
.ygHrMore1 p {
text-indent: 0;
}
.ygHrMore1 {
display: table-row;
}
.ygHrMore1 td {
padding: 5px 180px 5px 5px;
width: 645px;
}
.ygHrMup {
width: 30px;
height: 30px;
background: url("images/ygFoldBut.png") no-repeat 10px -0px;
text-indent: 30px;
line-height: 30px;
overflow: hidden;
display: block;
}
.ygHrMdown {
width: 30px;
height: 30px;
background: url("images/ygFoldBut.png") no-repeat 10px -30px;
text-indent: 30px;
line-height: 30px;
overflow: hidden;
display: block;
}
6、触发特效的js
<script>
$(function () {
$("#ygHrListBox a").live("click", function () {
if ($(this).attr("class") == "ygHrMup") {
$(this).removeClass("ygHrMup").addClass("ygHrMdown");
$(this).parents("tr").next(".ygHrMore").removeClass("ygHrMore").addClass("ygHrMore1");
} else if ($(this).attr("class") == "ygHrMdown") {
$(this).removeClass("ygHrMdown").addClass("ygHrMup");
$(this).parents("tr").next(".ygHrMore1").removeClass("ygHrMore1").addClass("ygHrMore");
}
});
});
</script>
