jquery 列表伸缩特效
1、首先上图看一下效果是什么样的。
4、html页面的代码结构,这里做个演示，所以测试数据就用两条吧 <div id="ygHrListBox">稆糨孝汶; <table cellspacing="1" cellpadding="0" width="830"> <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></p> </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></p> </td> </tr></tbody></table></div>
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>
