jQuery,引言

     
 关切到1恋人随处店铺的网址,看到招聘音讯部分,突然觉的那些职能不难并且可复用,然后自身就演练了一把。

缺点

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

页面

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

  

效果图

jQuery 1

 

jQuery 2

相关文章

网站地图xml地图