$('.weui-cells__title').on("click", function(e,rr){ isshow=$(this).attr('isshow') if(isshow=='hide'){ $(this).find('.user-arrow').removeClass("rotate"); $(this).find('.user-arrow').addClass("rotate1"); $(this).next().show(400); $(this).attr('isshow','show') }else{ $(this).find('.user-arrow').removeClass("rotate1"); $(this).find('.user-arrow').addClass("rotate"); $(this).next().hide(400); $(this).attr('isshow','hide') } });
<style type="text/css"> .user-arrow{ position:absolute; cursor:pointer; display:inline-block; margin-top:5px; float: right; width: 18px; height: 10px; } .rotate{ transform-origin:center center; //旋转中心要是正中间 才行 transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transition: transform 0.2s; //过度时间 可调 -moz-transition: -moz-transform 0.2s; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -ms-transition: -ms-transform 0.2s; } .rotate1{ transform-origin:center center; transform: rotate(0deg); //返回原点 -webkit-transform: rotate(0deg); -moz-transform: rotate(deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transition: transform 0.2s; -moz-transition: -moz-transform 0.2s; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -ms-transition: -ms-transform 0.2s; } </style>