jquery实现手拉风琴案例

HTML

<ul>
    <li class="check">
        <span>标题一</span>
        <div>我是下拉的菜单</div>
    </li>
    <li>
        <span>标题二</span>
        <div>我是下拉的菜单</div>
    </li>
    <li>
        <span>标题三</span>
        <div>我是下拉的菜单</div>
    </li>
</ul>

CSS

*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
.clearfix:after,.clearfix:before{
    content: '';
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix:before{
    *zoom: 1;
}
ul{
    width: 200px;
    height: 500px;
    border: 1px solid #ccc;
}
ul li {
    width: 200px;
    height: 40px;
   overflow: hidden;
}
ul li .check{
    height: 340px;
}
ul li span{
    height: 40px;
    line-height: 30px;
    text-align: center;
    display: block;
    width: 200px;
    margin: 0 auto;
    background-color: blanchedalmond;
    border: 1px solid red;
    box-sizing: border-box;
}
ul li div{
    height: 300px;
    line-height: 300px;
    text-align: center;
    font-size: 20px;
}

jquery

<script src="jQuery/jquery-1.12.3.js"></script>
    <script>
        $(function () {
          $("ul li span").mouseenter(function () {
             $(this).parent().animate({height:340},500);
             $(this).parent().siblings().animate({height:30},500);
          });
        });
    </script>