基于Jquery实现的手风琴

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;}

效果图如下：