Imitate a website recruitment list_html/css_WEB-ITnose

Introduction

I paid attention to the website of a friend’s company and saw the recruitment information section. I suddenly realized that this effect is simple and reusable, and then I practiced it myself.

Disadvantages

After clicking on the title to expand the content, the text is a bit jittery, and the problem has not been identified yet.

Page

 1 <div class='jobs_box'> 2     <h2 class='up'><b>高级Java软件工程师</b></h2> 3     <div class='hp_cont' style="display:none"> 4         <h3>岗位职责</h3> 5         <ul> 6             <li>负责系统架构设计和优化。</li> 7             <li>参与核心模块的编码与开发。</li> 8             <li>指导软件工程师的开发</li> 9             <li>了解互联网的技术发展，评估外部技术与解决方案</li>10             <li>提供团队的技术分析，设计和编码能力</li>11         </ul>12         <h3>任职要求:</h3>13         <ul>14             <li>计算机相关专业本科以上学历，大型互联网经验者优先；</li>15             <li>2-5年大型分布式应用系统分析、设计、开发经验；</li>16             <li>2年SSH(Struts, Spring, Hibernate)实践经验；</li>17             <li>在可扩展、高性能，高并发，高稳定性系统设计，开发和调优方面有实际经验；</li>18             <li>JAVA技术知识扎实，熟悉IO，多线程，异步处理，集合类等基础框架，熟悉缓存，消息，搜索等机制；</li>19         </ul>20     </div>21 </div>22 <div class='jobs_box'>23     <h2 class='up'><b>高级C#软件工程师</b></h2>24     <div class='hp_cont' style="display:none">25         <h3>岗位职责</h3>26         <ul>27             <li>负责系统架构设计和优化。</li>28             <li>参与核心模块的编码与开发。</li>29             <li>指导软件工程师的开发</li>30             <li>了解互联网的技术发展，评估外部技术与解决方案</li>31             <li>提供团队的技术分析，设计和编码能力</li>32         </ul>33         <h3>任职要求:</h3>34         <ul>35             <li>计算机相关专业本科以上学历，大型互联网经验者优先；</li>36             <li>2-5年大型分布式应用系统分析、设计、开发经验；</li>37             <li>2年SSH(Struts, Spring, Hibernate)实践经验；</li>38             <li>在可扩展、高性能，高并发，高稳定性系统设计，开发和调优方面有实际经验；</li>39             <li>JAVA技术知识扎实，熟悉IO，多线程，异步处理，集合类等基础框架，熟悉缓存，消息，搜索等机制；</li>40         </ul>41     </div>42 </div>

CSS

body    {        margin:0px;        padding:0px;        font-size:10px;    }        .jobs_box    {        width:590px;        margin:20px 0 0 10px;        border-bottom:1px dashed #e7eaec;    }        .jobs_box ul     {        list-style-type:decimal;    }        .jobs_box ul li     {        margin-left:15px;    }        .jobs_box .up, .jobs_box .down    {        width:16px;        height:16px;            }            .jobs_box .up {background:url(images/plus.png) no-repeat;}    .jobs_box .down{background:url(images/minus.png) no-repeat;}        .jobs_box h2    {       font-size:14px;       line-height:24px;       cursor:pointer;    }        .jobs_box h2 b     {        float:left;        width:560px;        margin:-3px 0 0 30px;            }        .jobs_box h3    {       padding-top:30px;           }        .jobs_box .hp_cont    {        padding:0 15px 0 25px;            }

jQuery code

<script type='text/javascript'>    $(function(){        $(".jobs_box").each(function(){            $(this).children('.up').click(function(){                if($(this).hasClass('up')){                    $(this).removeClass('up').addClass('down');                }else{                    $(this).removeClass('down').addClass('up');                }                                if($(this).next('.hp_cont').parent().siblings().children('h2').hasClass('down')){                    $(this).next('.hp_cont').parent().siblings().children('h2').removeClass('down').addClass('up');                }                $(this).next('.hp_cont').slideToggle().parent().siblings().children('.hp_cont').slideUp();            });        });    });</script>

Rendering