下拉菜单的手风琴效果

html代码

<div class="site-nav">
    <ul class="site-accordion">
        <li>
            <div class="tab-head">学科领域</div>
            <ul class="tabs-list">
                <li>机械电子</li>
                <li>生物工程</li>
                <li>能源环保</li>
                <li>化学化工</li>
            </ul>
        </li>
        <li>
            <div class="tab-head">省份地区</div>
            <ul class="tabs-list">
                <li>陕西省</li>
                <li>江苏省</li>
                <li>山东省</li>
                <li>河南省</li>
            </ul>
        </li>
        <li>
            <div class="tab-head">经费范围</div>
            <ul class="tabs-list">
                <li>50万~100万</li>
                <li>100万~200万</li>
                <li>200万~500万</li>
                <li>500万以上</li>
            </ul>
        </li>
        <li>
            <div class="tab-head">需求状态</div>
            <ul class="tabs-list">
                <li>状态1</li>
                <li>状态2</li>

            </ul>
        </li>

    </ul>
</div>

css代码

.site-accordion>li{
    margin-top: 13px;
}
.site-accordion>li .tab-head{
    width: 160px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #9c9c9c;
    font-size: 16px;
    background: #f2f2f2;
}
.site-accordion>li .tab-head:hover{
    background: #292d48;
}
.site-accordion>li .tab-head:after{
    content: '';
    border: 5px solid #4F5160;
    border-color: #4F5160 transparent transparent transparent;
    margin-top: 20px;
    position: relative;
    top: 10px;
    left: 5px;
}
.site-accordion>li .tabs-list{
    display: none;
}
.site-accordion>li .tabs-list li{
    width: 160px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #9c9c9c;
.site-accordion>li .tabs-list li:hover{
    background: #f2f2f2;
}   

jQuery代码

$('.tab-head').click(function(){
                    $(this).next().slideToggle();
                    $('.tab-head').css('background','#FFFFFF');
                    $(this).css('background','#292d48');

                })