旋轉箭頭圖像

Question

我試圖在人物點擊標題時將箭頭圖像旋轉至90度角。當人點擊標題時，它會展開，並且箭頭會旋轉到90度角。 但它根本不旋轉。我想知道如果我在代碼中做了任何錯誤，或者我錯過了某些東西以便箭頭旋轉。

這是我的HTML

<div class="additional-navigation-wrapper"> 
<div class="additional-navigation"> 
    <a class="border-bottom-white padding-level-one inactive additional-nav-info2" href="javascript:void(0);"> 
     VIEW MORE CANCER RESEARCH DESIGN 
     <img class="nav-arrow no-action floatright" src="images/white_arrow.png" /> 
     <span class="clearboth"></span> 
    </a> 
    <div class="additional-nav-info-wrapper2"> 
     <div class="additional-nav-info-inner2" style="display:none;"> 
      <ul> 
       Praesent tempor eleifend nibh, nec rutrum est tristique at. Nulla fermentum posuere posuere. Suspendisse potenti. Phasellus dapibus tristique urna, quis eleifend quam dapibus vel. Sed tempor ipsum ipsum, a tristique est tincidunt ac. Curabitur eu erat semper purus lacinia dignissim. Proin pretium hendrerit nisl, vitae ultricies erat adipiscing vitae. Aliquam scelerisque nisl sit amet molestie euismod. 
      </ul> 
     </div> 
    </div> 
</div> 

這是我的CSS

.nav-arrow{ 
float:right !important; 
-webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
transition-duration: 0.5s; 
margin:5px 0 0 0; 
padding:10px 0; 
} 

.nav-arrow img{ 
display:block; 
} 

.nav-arrow.active img{ 
-webkit-transform:rotate(90deg); 
-moz-transform:rotate(90deg); 
-o-transform:rotate(90deg); 
-webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
transition-duration: 0.5s; 
} 

.nav-arrow.inactive img{ 
-webkit-transform:rotate(0deg); 
-moz-transform:rotate(0deg); 
-o-transform:rotate(0deg); 
-webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
transition-duration: 0.5s; 
} 

.additional-navigation .nav-arrow{ 
padding:0; 
} 

.additional-navigation-wrapper a{ 
color:#FFFFFF; 
padding:10px 22px; 
text-transform:uppercase; 
text-decoration:none; 
display:block; 
} 

.additional-navigation .active{ 
color:#43b6cf; 
border-bottom:solid 1px #43b6cf; 
} 

.csstransitions .additional-navigation-wrapper a{ 
-webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
transition-duration: 0.5s; 
} 

.additional-navigation-wrapper a:hover{ 
color:#43b6cf; 
border-bottom:solid 1px #43b6cf; 
} 

.csstransitions .additional-navigation-wrapper .active img{ 
-webkit-transform:rotate(90deg); 
-moz-transform:rotate(90deg); 
-o-transform:rotate(90deg); 
-webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
transition-duration: 0.5s; 
} 

.csstransitions .additional-navigation-wrapper .inactive img{ 
-webkit-transform:rotate(0deg); 
-moz-transform:rotate(0deg); 
-o-transform:rotate(0deg); 
-webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
transition-duration: 0.5s; 
} 

這是我的jQuery

$(".additional-navigation a").hover(function(){ 
    if($(this).hasClass("active")) return false; 
    $(this).find(".nav-arrow").attr("src","images/nav-arrow-blue-one.png"); 
    //$(".additional-navigation").find(".nav-arrow").addClass("active"); 
    //$(".additional-navigation").find(".nav-arrow").removeClass("inactive"); 
    //$(".twitter-feed").slideDown(200); 
},function(){ 
    if($(this).hasClass("active")) return false; 
    $(this).find(".nav-arrow").attr("src","images/white_arrow.png"); 
    //$(".additional-navigation").find(".nav-arrow").addClass("inactive"); 
    //$(".additional-navigation").find(".nav-arrow").removeClass("active"); 
    //$(".twitter-feed").slideUp(200); 
}); 

$(".additional-nav-info2").click(function(){ 
     if($(".additional-nav-info-inner2").css("display") == "block"){ 
      $(this).removeClass("active"); 
      $(this).addClass("inactive"); 
      $(".additional-nav-info-inner2").stop().slideToggle(250); 
     } else { 
      $(this).removeClass("inactive"); 
      $(this).addClass("active"); 
      $(".additional-nav-info-inner2").stop().slideToggle(250); 
     } 
    }); 

    $(".additional-nav-info-inner2 a").click(function(){ 
     $(this).find("img").eq(0).fadeOut(250); 
     $(this).find("img").eq(1).fadeIn(250); 
    }, function(){ 
     $(this).find("img").eq(0).fadeIn(250); 
     $(this).find("img").eq(1).fadeOut(250); 
    }); 

Answer 1

加入這一行：

$（「。nav-arrow」）。toggleClass（「rotate」）; （請參見下面的jQuery代碼）

$(".additional-nav-info2").click(function(){ 
     $(".nav-arrow").toggleClass("rotate"); //added 
     if($(".additional-nav-info-inner2").css("display") == "block"){ 
      $(this).removeClass("active"); 
      $(this).addClass("inactive"); 
      $(".additional-nav-info-inner2").stop().slideToggle(250); 
     } else { 
      $(this).removeClass("inactive"); 
      $(this).addClass("active"); 
      $(".additional-nav-info-inner2").stop().slideToggle(250); 
     } 
    }); 
    $(".additional-nav-info-inner2 a").click(function(){ 
     $(this).find("img").eq(0).fadeOut(250); 
     $(this).find("img").eq(1).fadeIn(250); 
    }, function(){ 
     $(this).find("img").eq(0).fadeIn(250); 
     $(this).find("img").eq(1).fadeOut(250); 
    }); 
}); 

新增CSS：

.rotate { 
    -moz-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
}