先上图：
HTML部分：
<div class="left_box"> <ul> <li class="active">营养套餐</li> <li>酒水饮料</li> <li>酒水饮料</li> <li>酒水饮料</li> </ul> </div> <div class="right_box"> <div style="padding:0 5px 25px;"> <div class="pInfo"> <dl> <dt><h3>商务套餐</h3></dt> <dd><a href="#"><img src="/images/c01.jpg" /></a></dd> <dd> <em class="sale"> <b>特价</b>0.01元/份<br /> <del>15元/份</del> </em> </dd> <dd class="btn"> <button class="minus"> <strong></strong> </button> <i>0</i> <button class="add"> <strong></strong> </button> <i class="price">0.01</i> </dd> </dl> <dl> <dt><h3>商务套餐</h3></dt> <dd><a href="#"><img src="/images/c01.jpg" /></a></dd> <dd> <em class="sale"> <b>特价</b>0.01元/份<br /> <del>15元/份</del> </em> </dd> <dd class="btn"> <button class="minus"> <strong></strong> </button> <i>0</i> <button class="add"> <strong></strong> </button> <i class="price">8</i> </dd> </dl> <dl> <dt><h3>商务套餐</h3></dt> <dd><a href="#"><img src="/images/c01.jpg" /></a></dd> <dd> <em class="sale"> <b>特价</b>0.01元/份<br /> <del>15元/份</del> </em> </dd> <dd class="btn"> <button class="minus"> <strong></strong> </button> <i>0</i> <button class="add"> <strong></strong> </button> <i class="price">15.0</i> </dd> </dl> </div> </div> </div> <div class="clearfix"></div> </div> <div class="footer"> <div class="left"> 已选：<span id="cartN"> <span id="totalcountshow">0</span>份 总计：￥<span id="totalpriceshow">0</span> </span>元 </div> <div class="right"> <a id="btnselect" class="xhlbtn disable" href="javascript:void(0)" οnclick="btnSelectJump();">选好了</a> </div> </div>JS部分：
$(document).ready(function () { //加的效果 $(".add").click(function () { $(this).prevAll().css("display", "inline-block"); var n = $(this).prev().text(); var num = parseInt(n) + 1; if (num == 0) { return; } $(this).prev().text(num); var danjia = $(this).next().text();//获取单价 var a = $("#totalpriceshow").html();//获取当前所选总价 $("#totalpriceshow").html((a * 1 + danjia * 1).toFixed(2));//计算当前所选总价 var nm = $("#totalcountshow").html();//获取数量 $("#totalcountshow").html(nm*1+1); jss();//改变按钮样式 }); //减的效果 $(".minus").click(function () { var n = $(this).next().text(); var num = parseInt(n) - 1; $(this).next().text(num);//减1 var danjia = $(this).nextAll(".price").text();//获取单价 var a = $("#totalpriceshow").html();//获取当前所选总价 $("#totalpriceshow").html((a * 1 - danjia * 1).toFixed(2));//计算当前所选总价 var nm = $("#totalcountshow").html();//获取数量 $("#totalcountshow").html(nm * 1 - 1); //如果数量小于或等于0则隐藏减号和数量 if (num <= 0) { $(this).next().css("display", "none"); $(this).css("display", "none"); jss();//改变按钮样式 return } }); function jss() { var m = $("#totalcountshow").html(); if (m > 0) { $(".right").find("a").removeClass("disable"); } else { $(".right").find("a").addClass("disable"); } } }); CSS: .left_box{width:22%;float:left;background-color:#eee;position:relative;height:100%;} .left_box ul{padding:0;margin:0;} .left_box ul li{line-height:60px;font-size:14px;padding:3px 0;padding-right:15px;text-align:right;color:#333;border-bottom:1px dashed #ddd;} .left_box ul li.active{color:#f34b3f !important;background-color:#fff;} .right_box {width:78%;float:left;margin:0;overflow-y:scroll;background:#fff;position:relative;min-height:500px;} .pInfo{padding:5px;} .pInfo dl{position:relative;padding-left:60px;height:75px;border-bottom:1px solid #e7eaeb;border-top:1px solid #fff;padding-bottom:8px;margin-bottom:2px;} .pInfo dl dt h3{font-size:14px;margin-bottom:10px;margin-top:8px;} .pInfo dl dd{margin-left:0;font-size:11px;position:relative;z-index:1;} .pInfo dl dd img{height:55px;width:55px;position:absolute;left:-60px;top:-25px;border-radius:3px;cursor:pointer;vertical-align:middle;border:0;} .pInfo dl dd em{font-style:normal;line-height:10px;font-size:11px;vertical-align:bottom;} .pInfo dl dd em.sale{color:#f00;} .pInfo dl dd del{color:#b2b2b2;font-size:10px;line-height:22px;} .pInfo dl dd.btn{background-color:transparent;position:absolute;right:-5px;top:25%;cursor:pointer;padding:3px;height:38px;} .pInfo dl dd.btn button.minus{margin-right:-10px;display:none;} .pInfo dl dd.btn button{width:40px;height:40px;border:0;background:transparent;padding:0;} .pInfo dl dd.btn button strong{padding:5px 10px;font-size:15px;display:inline-block;text-indent:-100px;padding:5px 11px;height:12px;} .pInfo dl dd.btn button.minus strong{background:url(/images/jianhao.png) no-repeat;background-size:22px 22px;} .pInfo dl dd.btn i{display:none;width:22px;text-align:center;font-style:normal;vertical-align:top;margin-top:11px;line-height:18px;} .pInfo dl dd.btn button.add{margin-left:-10px;} .pInfo dl dd.btn button.add strong{background:url(/images/jiahao.png) no-repeat;background-size:22px 22px;} .pInfo dl dd.btn .price{display:none;} .footer{display:block;position:fixed;padding:5px 0;width:100%;z-index:3;bottom:0px;color:#f03c03;background:#fff;line-height:35px;font-size:15px;border-top:1px solid #e2e2e2;} .footer .left{float:left;margin-left:10px;} .footer .right{float:right;margin-right:10px;} .footer .right .disable{background:#dbdbdb;} .footer .xhlbtn{display:block;text-align:center;background-color:#F03C03;padding:0 15px;border-radius:20px;color:#fff;font-weight:bold;}