模仿某网站招聘列表

引言

缺点

页面

<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);// 展开当前元素
}
});
});
});

效果图