Question

我正在寻找一种在jquery中切换img（.arrow-img）来旋转的方法。

在这里，我在哪里;

$(document).ready(function() {
  $(".active-mobile").click(function() {
    $(".toggle-items").slideToggle();
    $(".arrow-img").css("-webkit-transform", "rotateY(0deg)");
    $(".arrow-img").css("transform", "rotateY(0deg)");
  });
});

正如你从小提琴中看到的那样，这是第一次工作;但我需要一种方法来重置/切换它以返回它的原始状态。

我还想这样做而不使用 jQuery的.addClass方法，我目前正在使用Squarespace构建网站，而且该方法并非如此。似乎在那种环境中工作。

小提琴 - ＆gt; https://jsfiddle.net/gavinfriel/5q3zzygx/3/

Answer 1

您可以这样做的一种方法是检查style属性是否存在。当您调用.css时，它会在元素上添加内联样式。如果它存在则删除它，否则添加它。

像这样：

$(document).ready(function() {
  $(".active-mobile").click(function() {
    $(".toggle-items").slideToggle();

    var $arrowImg = $(".arrow-img");

    if ($arrowImg.is('[style]')) {
      $arrowImg.removeAttr('style');
    } else {
      $arrowImg.css("-webkit-transform", "rotateY(0deg)");
      $arrowImg.css("transform", "rotateY(0deg)");
    }
  });
});

这是fiddle。

Answer 2

将JS简化为此规则，每次运行.toggle-items时都要在slideToggle()的父级上切换一个类：

$(".active-mobile").click(function() {       
  $(".toggle-items").slideToggle().parent().toggleClass("opened");     
});

然后添加此CSS规则，以便在打开切换时将箭头转换为正常值：

.opened .arrow-img {
  transform: none;
}

我能看到最简单，最干净的方式。演示如下：

＆＃13;

$(document).ready(function() {
  $(".active-mobile").click(function() {
    $(".toggle-items").slideToggle().parent().toggleClass("opened");
  });
});

＆＃13;

.tab-wrap-mobile {
  z-index: 100000;
  width: 100%;
  border-top: 1px solid rgba(63, 70, 80, .15);
  text-align: left;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #fff;
}

.tab-list-mobile {
  display: block;
  line-height: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
}

.tab-list-mobile li {
  display: block;
  width: 100%;
  text-align: left;
  border-top: solid .5px #EEEEEE;
}

.tab-list-mobile li.active-mobile {
  border-top: none;
}

.tab-list-mobile li.active-mobile span.arrow {
  float: right;
  padding-right: 20px;
}

.arrow-img {
  width: 15px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.opened .arrow-img {
  transform: none;
}

.tab-list-mobile li a {
  padding-left: 20px !important;
}

.tab-list-mobile li a {
  color: rgba(63, 70, 80, .5);
  text-decoration: none;
}

.tab-list-mobile li a:hover {
  cursor: pointer;
  color: rgba(63, 70, 80, .95);
  transition: all .1s ease-in-out;
}

.tab-list-mobile li.active-mobile a {
  color: rgba(63, 70, 80, .95);
}

.toggle-items {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tab-wrap-mobile">
  <ul class="tab-list-mobile">
    <li class="active-mobile">
      <a>Software Delivery</a>
      <span class="arrow">
          <img class="arrow-img" src="https://static1.squarespace.com/static/59c51ac6268b96cf65b0125e/t/5a0455a9f9619aca282064c6/1510233513011/tab-arrow.png">
       </span>
    </li>
    <div class="toggle-items">
      <li><a href="/consulting">Consulting</a></li>
      <li><a href="analytics">Analytics</a></li>
      <li><a href="/training">Training</a></li>
    </div>
  </ul>
</div>

＆＃13;

Answer 3

这是一个工作小提琴的例子： https://jsfiddle.net/vm63nj84/1/

我刚为箭头添加了一个新的css规则，如果它具有活动类

，则会对其进行动画处理

.arrow-img.active {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

现在我用jquery切换这个类：

$(".arrow-img").toggleClass("active");

Answer 4

一个简单而且非常干净的方法是使用您的变换的类，并在单击时切换该类。

CSS：

mortgage<-function(P,I,L,amort,periodicity,n,residual,discount){


if(periodicity<-TRUE){i<-I/n}else{i<-I}
N<-n*L 
payment<- -((residual-(P*((1+i)^N)))/((((1+i)^N)-1)/i))
pay<<-payment
if(amort==T){
Pt<-P
currP<-NULL
while(Pt>=residual){
H<-Pt*i 
C<- payment-H
Q<-Pt-C
Pt<-Q
currP<-c(currP,Pt)}
monthP<-c(P,currP[1:(length(currP)-1)])-currP

adFmonth<<-data.frame(
  Amortization=c(P,currP[1:(length(currP)-1)]),
  Payment<-monthP+c((pay-monthP)[1:(length(monthP)-1)],0),
  Principal=monthP,
  Interest=c((pay-monthP)[1:(length(monthP)-1)],0),
  Time=sort(rep(1:ceiling(L*n/n),n))[1:length(monthP)]
)
adFmonth<<-adFmonth
}

AssetValue<-pv(discount/n,N,residual,pay)

return(AssetValue)
}

JS：

.arrow-img.is-open {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}

https://jsfiddle.net/5q3zzygx/8/

Answer 5

您可以检查类切换项的显示值。如果单击时显示等于无，则可以将旋转量设置为预期状态。

if($(".toggle-items").css("display") == none){

}
else{

}

所以使用变量来代替度数

Answer 6

var degrees = 0;
$(".active-mobile").click(function() {
  degrees += 90;
  $(".toggle-items").slideToggle();
  $(".arrow-img").css({
    'transform': 'rotate(' + degrees + 'deg)',
    '-ms-transform': 'rotate(' + degrees + 'deg)',
    '-moz-transform': 'rotate(' + degrees + 'deg)',
    '-webkit-transform': 'rotate(' + degrees + 'deg)',
    '-o-transform': 'rotate(' + degrees + 'deg)'
  });
});

Jquery旋转Img

6 个答案: