模仿某网站招聘列表

引言

       关注到一朋友所在公司的网站，看到招聘信息部分，突然觉的这个效果简单并且可复用，然后自己就练习了一把。

缺点

      点击标题展开内容后，文字有点抖动，还没排查出来问题所在。

页面

<div class='jobs_box'>
    <h2 class='up'><b>高级Java软件工程师</b></h2>
    <div class='hp_cont' style="display:none">
        <h3>岗位职责</h3>
        <ul>
            <li>负责系统架构设计和优化。</li>
            <li>参与核心模块的编码与开发。</li>
            <li>指导软件工程师的开发</li>
            <li>了解互联网的技术发展，评估外部技术与解决方案</li>
            <li>提供团队的技术分析，设计和编码能力</li>
        </ul>
        <h3>任职要求:</h3>
        <ul>
            <li>计算机相关专业本科以上学历，大型互联网经验者优先；</li>
            <li>2-5年大型分布式应用系统分析、设计、开发经验；</li>
            <li>2年SSH(Struts, Spring, Hibernate)实践经验；</li>
            <li>在可扩展、高性能，高并发，高稳定性系统设计，开发和调优方面有实际经验；</li>
            <li>JAVA技术知识扎实，熟悉IO，多线程，异步处理，集合类等基础框架，熟悉缓存，消息，搜索等机制；</li>
        </ul>
    </div>
</div>
<div class='jobs_box'>
    <h2 class='up'><b>高级C#软件工程师</b></h2>
    <div class='hp_cont' style="display:none">
        <h3>岗位职责</h3>
        <ul>
            <li>负责系统架构设计和优化。</li>
            <li>参与核心模块的编码与开发。</li>
            <li>指导软件工程师的开发</li>
            <li>了解互联网的技术发展，评估外部技术与解决方案</li>
            <li>提供团队的技术分析，设计和编码能力</li>
        </ul>
        <h3>任职要求:</h3>
        <ul>
            <li>计算机相关专业本科以上学历，大型互联网经验者优先；</li>
            <li>2-5年大型分布式应用系统分析、设计、开发经验；</li>
            <li>2年SSH(Struts, Spring, Hibernate)实践经验；</li>
            <li>在可扩展、高性能，高并发，高稳定性系统设计，开发和调优方面有实际经验；</li>
            <li>JAVA技术知识扎实，熟悉IO，多线程，异步处理，集合类等基础框架，熟悉缓存，消息，搜索等机制；</li>
        </ul>
    </div>
</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代码

<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>

优化后的jQuery代码

$(function(){
		$(".jobs_box").each(function(){
			 var oBtn=$(this).find('h2');
			 var oDiv=$(this).find('.hp_cont');
			 oBtn.click(function(){
				$('.hp_cont').slideUp(200); //隐藏其它打开的元素
				$('.jobs_box').find('h2').removeClass('down');
				if(oDiv.is(':visible')){
					oDiv.slideUp(200);
				}else{
					oBtn.addClass('down');
					oDiv.slideDown(300);// 展开当前元素
				}
			 });
		});
});

　　

效果图