jquery列表折叠和展开

折叠

展开

html

<div class="container">
  <div class="list">
    <ul>
      <li>
        <div class="job_name">
          <div class="title"><span>销售顾问</span></div>
          <div class="info"><span>地点：成都市</span><span>·</span><span>学历：不限</span></div>
          <div class="time">2022-01-01</div>
        </div>
        <div class="detail_content"> </div>
        <div class="button"><span class="tit"></span><span class="icon show"></span></div>
      </li>
      <li>
        <div class="job_name">
          <div class="title"><span>人事经理</span></div>
          <div class="info"><span>地点：成都市</span><span>·</span><span>学历：不限</span></div>
          <div class="time">2022-01-01</div>
        </div>
        <div class="detail_content"> </div>
        <div class="button"><span class="tit"></span><span class="icon show"></span></div>
      </li>
      <li>
        <div class="job_name">
          <div class="title"><span>技术开发</span></div>
          <div class="info"><span>地点：成都市</span><span>·</span><span>学历：不限</span></div>
          <div class="time">2022-01-01</div>
        </div>
        <div class="detail_content"> </div>
        <div class="button"><span class="tit"></span><span class="icon show"></span></div>
      </li>
    </ul>
  </div>
</div>

css

.container .list{ max-width:520px; margin:0 auto; padding-left:17px; padding-right: 17px; padding-top:100px; }
.container .list ul li{ margin-bottom:20px; }
.job_name .title{ font-size: 16px; font-weight: 400; color: #333; margin-bottom: 4px; }
.job_name .info{ margin-bottom: 4px; color:#7f7f7f; }
.job_name .info span{ margin-right:10px; }
.job_name .time{ font-size: 12px; color:#7f7f7f; }

.button{  text-align: center; }
.button span.tit{ color: #31bcad; }
.button span.icon{ vertical-align: middle; }
.button span.show{ width: 18px; height: 18px; background: url("../img/down.png") no-repeat; background-size: cover; display: inline-block; }
.button span.hide{ width: 18px; height: 18px; background: url("../img/down.png") no-repeat; background-size: cover; display: inline-block; transform: rotate(-180deg); }

javascript

$('.list ul li .button').on('click',function(){
	
	if($(this).hasClass("close") == true){
		
		$(this).removeClass('close')
		$(this).find('.tit').text('')
		$(this).find('.icon').removeClass('hide').addClass('show')
		$(this).parent().find('.detail_content').empty();

	}else{

		$(this).addClass('close')
		$(this).find('.tit').text('收起')
		$(this).find('.icon').removeClass('show').addClass('hide')

		var mythis = $(this)
		var text = '<p>内容</p>';
		mythis.parent().find('.detail_content').html(text);
	}
})