直接使用代码

图片素材

css代码

       <style type="text/css">
/*人才招聘*/
.zhaopin{ padding:10px 00px;}
.zhaopin a{ color:#333}
.zhaopin .kuai{ line-height:35px; background:#fff; padding:0 20px; border-radius:5px; margin:15px 0; cursor:pointer}
.zhaopin .current{ background:#51ad2e; color:#fff}
.zhaopin .son:hover{ background:#e2f0bf;}
.zhaopin .son .date{ background:url(/Public/images/recruitment/zhaopin3.jpg)  no-repeat right center}
.zhaopin .son:hover .date{ background:url(/Public/images/recruitment/zhaopin2.jpg) right center no-repeat}
.zhaopin-content{ display:none; padding:0 20px;color:#666; line-height:25px}
.zhaopin-info{ padding:20px 10px;}
</style>

HTML+JS代码

  <div class="container">
   <div class="zhaopin">
                <div class="kuai current">
                    <div class="col-md-7 col-xs-4">职位名称</div>
                    <div class="col-md-2 col-xs-4">招聘人数</div>
                    <div class="col-md-3 col-xs-4">更新时间</div>
                    <div class="clear"></div>
                  </div>
            
                  <volist name='listRecruitment' id='vo'>
                      <!-- item start -->
                      <div class="my-item">
                          <div class="kuai son">                          
                            <div class="col-md-7 col-xs-5">营销主管</div>
                            <div class="col-md-2 col-xs-2">5人</div>
                            <div class="col-md-3 date col-xs-5">2019-10-17</div>
                            <div class="clear"></div>                        
                          </div>                      
                          <div  class="zhaopin-content">要问王者荣耀之中，天美设计最成功的英雄是哪一个？第一个要说的就是亚瑟。可能很多朋友都会忽略这个英雄， 因为他是天美免费送的，所以就会给人一种“不值钱”的感觉。但我个人认为他却是天美...</div>
                        </div>
                    <!-- item end -->
                  </volist>   
                   <div class="zhaopin-info">
                    <div class="kuai current" ><h4 style="line-height:36px">人才招聘</h4></div><br>
            
                    <p>
                      联 系 人：周先生<br/>
                      电    &nbsp;&nbsp;&nbsp;&nbsp;话：020-81199772<br/>
                      邮    &nbsp;&nbsp;&nbsp;&nbsp;箱：zhouchong@52cfzy.com
                   </p>
                  </div>  
                
                  <div class="clear"></div>
           </div>
      </div>
 </div>

 <script type="text/javascript">
                $('.my-item').click(function(){
                  $(this).siblings().children('.zhaopin-content').hide();						   
                  $(this).children('.zhaopin-content').slideToggle();						   
                 })
</script>