基于jQuery绿色简洁风格的新零售介绍手风琴切换展示代码。京东到家模式，美团外卖模式，同城电商模式，社区新零售模式4种手风琴滑动切换效果。
使用方法
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />2、head引入js文件
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>3、body引入HTML代码
<div class="section"> <div class="container"> <div class="mod-title"> <h2>适应多种O2O新零售模式</h2> </div> <ul class="mode-list"> <li class="mode-item mode-item-1 active"> <div class="mode-wrap"> <div class="mode-view"> <h3>京东到家模式</h3> <h4>生鲜百货 极速送达</h4> <i></i> <ul> <li>招商入驻</li> <li>商业服务</li> <li>LBS定位</li> <li>平台协作</li> </ul> </div> <div class="mode-detail"> <div class="detail-left"> <i></i> <h3>京东到家模式</h3> <h4>以京东到家的商业模式为蓝本 专注平台运营和推广，服务与配送都由商家提供</h4> </div> <div class="detail-right"> <ul> <li> <h3>招商入驻</h3> <p>便捷招商、快速招纳优质商家<br>到平台入驻、丰富平台形象</p> </li> <li> <h3>商业服务</h3> <p>不同的商家在平台提供服务<br>给用户提供更多选择</p> </li> <li> <h3>LBS定位</h3> <p>用户可通过手机端LBS定位后<br>显示周边的店铺信息</p> </li> <li> <h3>平台协作</h3> <p>用户选择服务、商家提供服务<br>在平台完成协作需求</p> </li> </ul> <a href="#" class="get">获取方案</a> </div> </div> </div> </li> <li class="mode-item mode-item-2"> <div class="mode-wrap"> <div class="mode-view"> <h3>美团外卖模式</h3> <h4>打造吃喝玩乐一站式商圈</h4> <i></i> <ul> <li>整合商圈</li> <li>种类齐全</li> <li>团购促销</li> <li>预约到店</li> </ul> </div> <div class="mode-detail"> <div class="detail-left"> <i></i> <h3>美团外卖模式</h3> <h4>一个吃喝玩乐全都有的一站式团购平台，基于定位覆盖同城商圈的娱乐、生活服务</h4> </div> <div class="detail-right"> <ul> <li> <h3>整合商圈</h3> <p>整合同城各类娱乐商圈及服务<br>在平台入驻、丰富平台资源</p> </li> <li> <h3>种类齐全</h3> <p>让用户在平台拥有更多的选择<br>促进平台的消费发展</p> </li> <li> <h3>团购促销</h3> <p>平台的店铺优惠满减活动促销<br>让用户更愿意通过平台下单</p> </li> <li> <h3>预约到店</h3> <p>用户在家即可预约到店，通过<br>验证码推送、即可到店服务</p> </li> </ul> <a href="#" class="get">获取方案</a> </div> </div> </div> </li> <li class="mode-item mode-item-3"> <div class="mode-wrap"> <div class="mode-view"> <h3>同城电商模式</h3> <h4>集合本地特色服务与优势</h4> <i></i> <ul> <li>本地服务</li> <li>快速送达</li> <li>质量保证</li> <li>广告收入</li> </ul> </div> <div class="mode-detail"> <div class="detail-left"> <i></i> <h3>同城电商模式</h3> <h4>集合本地特色服务与优势、找准方向定位、快速覆盖本地商圈打造同城电商平台</h4> </div> <div class="detail-right"> <ul> <li> <h3>本地服务</h3> <p>每个城市都有当地的服务特色<br>能做好天猫京东做不到的优势</p> </li> <li> <h3>快速送达</h3> <p>京东天猫配送均为1天左右<br>同城配送可以最快1小时送达</p> </li> <li> <h3>质量保证</h3> <p>本地商品的质量用户更加清楚<br>因此更愿意信赖平台品质</p> </li> <li> <h3>广告收入</h3> <p>同城广告投放会更加精准有效<br>平台可获取更多的广告盈利</p> </li> </ul> <a href="#" class="get">获取方案</a> </div> </div> </div> </li> <li class="mode-item mode-item-4"> <div class="mode-wrap"> <div class="mode-view"> <h3>社区新零售模式</h3> <h4>社区服务+社区交流+商圈</h4> <i></i> <ul> <li>门店整合</li> <li>周边服务</li> <li>服务预约</li> <li>评价晒单</li> </ul> </div> <div class="mode-detail"> <div class="detail-left"> <i></i> <h3>社区新零售模式</h3> <h4>整合周边商家店铺、供消费者在平台选择，让周边实体商户都成为你的赚钱渠道</h4> </div> <div class="detail-right"> <ul> <li> <h3>门店整合</h3> <p>整合社区周边的所有门店入驻<br>到你的平台、成为赚钱工具</p> </li> <li> <h3>周边服务</h3> <p>消费者轻松一览周边生活信息<br>在平台轻松付款下单</p> </li> <li> <h3>服务预约</h3> <p>消费者选择服务后一键预约<br>技师和配送员即可快速上门</p> </li> <li> <h3>评价晒单</h3> <p>服务完成后消费者可评价晒单<br>让其他消费者更了解服务情况</p> </li> </ul> <a href="#" class="get">获取方案</a> </div> </div> </div> </li> </ul> </div> </div> <script type="text/javascript"> $(".section .mode-list .mode-item").hover(function() { $(this).addClass("active").siblings().removeClass("active"); }); </script>
