模仿某網站招聘列表

時間 2019-11-30

原文原文鏈接

引言

關注到一朋友所在公司的網站，看到招聘信息部分，忽然覺的這個效果簡單而且可複用，而後本身就練習了一把。javascript

缺點

點擊標題展開內容後，文字有點抖動，還沒排查出來問題所在。java

頁面

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

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