多语言展示
当前在线:1661今日阅读:176今日分享:34

jquery 列表伸缩特效

发现一些招聘网站的点击更多在原页面table行下又展现出一个div层,觉得好酷呀,这个是怎么弄得呢。
工具/原料

jquery-1.8.3.min.js

方法/步骤
1

首先上图看一下效果是什么样的。

2

接着我们要准备的东西,jquery的脚本文件,可以去网上下载。jquery-1.8.3.min.js,还要就是要用到的图片

3

在head 标签里引用jquery。

4

html页面的代码结构,这里做个演示,所以测试数据就用两条吧   

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
职位名称职位类别工作地点招聘人数发布时间 
博士后研发类珠海,北京,武汉102016-4-20更多
                       
                        1、已获得或在入站前将获得受教育认可的正规院校博士学位,入站后能够保证全职从事博士后研究;
                        2、计算机、信息管理、财务、金融、数学、电力等研究方向;
                        3、品学兼优,身体健康,年龄在35周岁以下,有多篇国内外学术期刊或者会议上发表论文。
                       

申请职位

                   
售前咨询顾问营销类珠海,北京,武汉22016-4-20更多
                       
                        1、熟悉国内外最新的企业管理发展趋势,对于大型集团的管理理念、方法、流程熟悉,熟悉集团财务、供应链管理、工程项目管理、审计管理其中之一并在此领域工作多年。
                        2、具有有大型企业咨询、审计及售前顾问经验;拥有内部审计监控、风险、内控、财务、数据分析等项目实务操作经验或具有咨询、外部审计经验
                        3、有电力行业背景,持有注册会计师证书、注册内部审计师、项目管理认证等资格证书优先考虑;
                        4、熟悉管理软件(财务管理、ERP、供应链、风险与内控、营销、物资)的设计、分析、实施、应用或维护等经验优先考虑;
                        5、、软件企业售前经验优先
                       

申请职位

                   

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 

推荐信息