HTML代码如下:
<div class="join-us-right">
<ul>
<li class="index-item">
<div class="title">
<p class="job-name">手风琴列表1</p>
<p class="job-date">2017.8.18</p>
</div>
<div class="content">
内容1
</div>
</li>
<li class="">
<div class="title">
<p class="job-name">手风琴列表2</p>
<p class="job-date">2017.8.18</p>
</div>
<div class="content">
内容2
</div>
</li>
<li class="">
<div class="title">
<p class="job-name">手风琴列表3</p>
<p class="job-date">2017.8.18</p>
</div>
<div class="content">
内容3
</div>
</li>
<li class="">
<div class="title">
<p class="job-name">手风琴列表4</p>
<p class="job-date">2017.8.18</p>
</div>
<div class="content">
内容四
</div>
</li>
</ul>
</div>
JS代码:
$(function() {
$(".join-us-right li .title").click(function() {
$(this).parent().animate({
height: 408
}, 500);
$(this).parent().siblings().animate({
height: 50
}, 500);
})
})
CSS样式代码
* {
margin: 0;
padding: 0;
}
body {
background-color: #f7f7f7;
padding-top: 40px;
}
.join-us-right {
width: 932px;
height: 100%;
margin: 0 auto;
}
.join-us-right .title {
background: #fff;
height: 50px;
line-height: 50px;
width: 100%;
font-size: 16px;
color: #505050;
cursor: pointer;
font-family: "Hiragino Sans GB";
}
.join-us-right .title .job-name {
width: 450px;
display: inline-block;
padding-left: 24px;
}
.join-us-right .title span {
color: #bcbcbc;
}
.join-us-right .title .job-date {
width: 300px;
display: inline-block;
text-align: right;
}
.join-us-right .content {
background: #fff;
height: 358px;
font-size: 14px;
font-family: "Hiragino Sans GB";
color: #505050;
padding: 20px 22px 20px 22px;
line-height: 34px;
}
.join-us-right li {
height: 50px;
overflow: hidden;
margin-bottom: 14px;
}
.join-us-right li.index-item {
height: 408px;
}
效果图如下: