jquery實現簡單的手風琴效果

最近看到我看的教學視頻有不少手風琴效果，我也試着寫一下，當做練習。

明天我放假，就要去找工作，不知道，我的前端之路，能不能正式開始。

菜鳥起飛的機會都沒有，那就尷尬了.

純屬練習：

效果如圖：

html:

<ul class="wrap">
   <li class="checked">
       <span>選項1</span>
       <div>1</div>
   </li>
    <li>
        <span>選項2</span>
        <div>2</div>
    </li>
    <li>
        <span>選項3</span>
        <div>3</div>
    </li>
    <li>
        <span>選項4</span>
        <div>4</div>
    </li>
    <li>
        <span>選項5</span>
        <div>5</div>
    </li>
</ul>

 

css:

    ul,li,div,span{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        span{
            display: block;
            border-bottom:1px solid black;
            background-color: orange;

        }

        .wrap{
            width: 400px;
            height: 500px;
            border: 1px solid black;
        }
        .wrap li{
            width: 400px;
            height: 40px;
           overflow: hidden;

        }
        ul li.checked{
            height: 340px;
        }
        .wrap li span{
            height: 39px;
            line-height: 39px;
           text-indent: 20px;
        }

        .wrap li div{
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 50px;
        }

jquery:

  $(function(){
            $("ul li span").mouseover(function(){
                $(this).parent().animate({height:340},500);
                $(this).parent().siblings().animate({height:40},500);
            })
        })