#### 时间：2018-2-8 13:50 点击选择支付方式，从上往下滑动展现选择菜单，右边尖括号添加动画效果 HTML如下 ~~~ <div class="payment"> <h5 class="bottom-after">选择充值方式：</h5> <ul> <a href="javascript:;"> <li class="select-pay thisclass"> <span>请选择支付方式</span> <img src="static/img/xia.png" /> </li> <ul> <li class="mypay top-after"> <img src="static/img/qb.png" class="l-icon"> <span>现金支付</span> <img src="static/img/good.png" class="r-icon" /> </li> <li class="mypay top-after"> <img src="static/img/wx.png" class="l-icon"> <span>微信支付</span> <img src="static/img/good.png" class="r-icon" /> </li> <li class="mypay top-after"> <img src="static/img/zfb.png" class="l-icon"> <span>支付宝支付</span> <img src="static/img/good.png" class="r-icon" /> </li> <li class="mypay top-after"> <img src="static/img/yhk.png" class="l-icon"> <span>银行卡支付</span> <img src="static/img/good.png" class="r-icon" /> </li> </ul> </a> </ul> </div> ~~~ CSS如下 ~~~ /*选择支付方式*/ .payment { margin-top: 12px; } .payment h5 { width: 100%; height: 40px; line-height: 40px; background: #fff; font-size: 14px; color: #999; } .payment ul li.select-pay { position: relative; width: 100%; height: 46px; overflow: hidden; } .payment ul a ul { display: none; } .payment ul a ul li { width: 100%; height: 46px; overflow: hidden; } .payment ul a ul { } .payment ul li.select-pay span { float: left; } .payment ul li.select-pay img { float: right; width: 14px; height: 8px; margin-top: 19px; margin-right: 10px; } .payment ul li i.l-icon { display: block; float: left; line-height: 42px; font-size: 28px; } .payment ul li:nth-child(1) i.l-icon { color: #60B130; } .payment ul li span { display: block; float: left; padding-left: 5px; line-height: 46px; font-size: 15px; color: #666; } /*选择支付方式*/ .mypay img.l-icon { float: left; height: 20px; margin-top: 13px; margin-right: 5px; } .mypay img.r-icon { display: none; float: right; margin-top: 13px; width: 20px; height: 20px; } /*默认选中现金支付*/ /*.mypay:last-child img.r-icon { display: block; }*/ li.thisradio img.r-icon{ display: block; float: right; margin-top: 14px; width: 18px; height: 18px; } ~~~ 图片尖括号旋转效果的css样式 ~~~ /*图片旋转效果*/ @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(180deg);} } @-webkit-keyframes rotation1{ from {-webkit-transform: rotate(180deg);} to {-webkit-transform: rotate(360deg);} } .animation{ -webkit-animation: rotation 0.6s ease; -o-animation: rotation 0.6s ease; -moz-animation: rotation 0.6s ease; animation: rotation 0.6s ease; animation-fill-mode : forwards; /* 不循环转动 */ } .anima1{ -webkit-animation: rotation1 0.6s ease; -o-animation: rotation1 0.6s ease; -moz-animation: rotation1 0.6s ease; animation: rotation1 0.6s ease; animation-fill-mode : forwards; /* 不循环转动 */ } ~~~ js如下 ~~~ //选择支付方式 $(".select-pay").click(function(){ if($(".payment ul a ul").css("display") == "none"){ $(".payment ul a ul").slideToggle("normal"); //给图片添加旋转动画 $(".select-pay img").addClass("animation").removeClass("anima1"); } //选择支付列表中一种支付方式 else { $(".payment ul a ul").toggle(500); $(".select-pay img").addClass("anima1").removeClass("animation"); // $('.payment ul a ul li').removeClass('thisradio'); } }) //选择支付方式展开的菜单收缩回去 $('.payment ul a ul li').click(function(){ $(this).addClass('thisradio').siblings().removeClass('thisradio'); // $(".mypay:last-child img.r-icon").removeClass('thisradio'); var sPay = $(this).text(); $(".select-pay span").html(sPay); $(".select-pay img").addClass("anima1").removeClass("animation"); $(".payment ul a ul").toggle(400); }) ~~~