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

<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"});        })    });