购物车伸缩功能，像美团外卖购物车。

<link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css"/>
    <!--  takeout.html 外卖    codeOrder.html 扫码  toQueue.html 排队 -->
    <style>
        .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
            border-bottom-color:#dddddd;
            border-right-color: #FFFFFF;
            border-left: 3px solid #367DB9;
        }
        .nav-tabs>li>a{margin-right: 0;}
        .nav>li>a{padding: 10px 10px;}
        .wapper{ position: relative;   /*重要！保证footer是相对于wapper位置绝对*/
            height: 100%;          /* 保证页面能撑开浏览器高度时显示正常*/
            min-height: 100%  /* IE6不支持，IE6要单独配置*/  }
        .dishes1_info.active{display: block;}
        .dishes1_info{font-size: 14px;border-top:2px solid #367DB9 ;}
        /*.dishes_head{}*/
        .dishes_body{float: left;width: 100%; padding-bottom:50px;}
        .dishes_footer{float: left;width: 100%;height:50px;position:fixed;bottom:0px;left:0px;z-index: 9999;background-color: white;}
        /*#sCart{position: fixed;bottom:50px;width:100%;background-color: #FFFFFF;z-index:9999;color: black;}*/
        #sCart li{width:100%;padding: 10px;border-bottom: 1px solid #E4E4E4;float: left;}
        .li2{border-bottom: 1px solid #E4E4E4;padding: 5px;}
        .li2 a{float: right;padding: 10px;}
        .li2 i{cursor: pointer;color: #0f0f0f;}
        /*.mask{ width:100%; height:0px;display:none;background-color:gray; overflow:hidden; position:fixed; left:0; bottom:0; font-size:12px; color:#fff;opacity: 0.9;}*/
        .dishesnum1{display:inline-block;margin-top: 10px;float: right;}
        .dishesnum1 i{width: 30px;height: 30px;text-align: center;border: 1px solid #dddddd;border-radius: 50%;line-height: 30px;font-size: 16px;cursor: pointer;}
        .dishesnum1>span{display: inline-block;}
        /*.pull-left img{display: inline-block;height:8%;width:8%;}*/
        .mask{ width:100%; height:0px;display:none;background-color:gray; overflow:hidden; position:fixed; left:0; bottom:0; font-size:12px; color:#fff;opacity: 0.9;}
        .list-box{
            width: 100%;
            max-height: 80vh;
            /*min-height: 30vh;*/
            background-color: white;
            position: fixed;
            bottom: 0;
        }
        .selected-list{
            max-height: 60vh;
            overflow-y: scroll;
            margin-bottom: 50px;
        }
        .selected-list li{
            color: #666;
        }
    </style>
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/plugins/bootstrap.min.js"></script>

<div class="dishes_head row m-t">
    <div class="col-lg-12 col-xs-12">
        <div class="dishes_all col-lg-2 col-xs-3" style="padding-left: 15px;">全部商品</div>
        <div class="dishes_search col-lg-8 col-xs-7 text-right"><i class="fa fa-search"></i></div>
        <div class="dishes_user col-lg-2 col-xs-2 text-right" style="padding-right: 25px;"><i class="fa fa-user"></i></div>
    </div>
</div>
<div class="wapper">
<div class="dishes_body ">
    <div id="TypeMenu" class="dishes1_info col-xs-3 col-lg-3" >

    </div>
    <div id="CaList" class="col-xs-9 col-lg-9 tab-content1" style="padding-left: 5px;padding-right: 5px;overflow-y: scroll;height: 550px;">
        <!--<div class='wale'>快餐</div>-->
    </div>
</div>
<div class="dishes_footer">
    <div class="remark3 col-xs-12 col-md-12 m-t"><div style="display: inline-block;"><i class="fa fa-shopping-cart shopcar" style="font-size: 30px;padding-right: 15px;"></i><span class="num" id="dish_num">0</span></div><span class="dish_price">0</span><a href="" class="btn btn-info sub" id="submit">我选好了<small>去下单</small></a></div>
</div>
</div>

<div class="mask" >
  <div class="list-box">
    <div class="li2"><i class="fa fa-shopping-cart shopcar" style="font-size: 30px;"></i><span class="num" id="dish_num2">0</span><a href="javascript:void(0);">清空购物车</a></div>
    <ul class="selected-list" id="sCart">
    </ul>
  </div>
</div>

js

    $(function(){//购物车伸长缩短
        $(".remark3 i").click(function(){
            $(".mask").show();
            $(".mask .list-box").show();
            $(".remark3>div").hide();
            $(".mask").animate({height:"100%"});
        });
        $(".li2 i").click(function(){
            $(".remark3>div").show();
            $(".mask .list-box").hide();
            $(".mask ").animate({height:"0"});
        })
    });