jquery - 旋转箭头图像

Question

当有人点击标题时，我试图将箭头图像旋转 90 度 Angular 。当人们点击标题时，它会展开，箭头应该旋转 90 度 Angular 。 但它根本不旋转。我想知道我的代码是否做错了什么，或者我是否遗漏了一些东西导致箭头旋转。

这是我的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("旋转"); (见下面的 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);
}