下拉菜單的滑動效果 · 小裕的前端blog

#### 時間：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); }) ~~~