1、首先上图看一下效果是什么样的。
2、接着我们要准备的东西,jquery的脚本文件，可以去网上下载。jquery-1.8.3.min.js，还要就是要用到的图片
3、在head 标签里引用jquery。
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>
5、页面布局cs衡痕贤伎s ，样式设定：首先table :/*table 基本设定*/table { margin: 0; pa颊俄岿髭dding: 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>
