有过渡效果的下拉菜单

自己写的一个带有过渡效果的下拉菜单，插件虽然多，但是这些小功能还是自己写的好，能按你的实际开发需求来。

<style>

            .qing{margin-left: 300px;}
            .qing li{overflow: hidden; width: 300px;height: 50px;box-sizing: border-box;border: 1px solid #c00;transition: all 0.5s ease;}
            .qing li>div:first-child{height: 50px;padding: 10px;box-sizing: border-box;}
            .qing li .abc{height: 100px;padding: 20px;background-color: darkgrey;box-sizing: border-box;}
            .feng{height: 150px !important;transition: all 0.5s ease;}

</style> 

        <ul class="qing">
            <li class="feng">
                <div>天王盖地虎，小鸡炖蘑菇。</div>
                <div class="abc">天使地利人和</div>
            </li>
            <li>
                <div>宝塔镇河妖，蘑菇放辣椒。</div>
                <div class="abc">天使地利人和</div>
            </li>
            <li>
                <div>河妖用大招，二楼弯下腰。</div>
                <div class="abc">天使地利人和</div>
            </li>
            <li>
                <div>莫愁不开怀，二楼出人才。</div>
                <div class="abc">天使地利人和</div>
            </li>
        </ul>

<script>

        $('.qing li').click(function(){
            if($(this).hasClass('feng')){
                $(this).removeClass('feng');
            }else{
                $(this).addClass('feng').siblings('li').removeClass('feng');
            }
        });

</script>