javascript - 旋转图标并同时切换内容 onclick

Question

当我点击图标旁边的链接时，我试图旋转图标。这个想法是当我点击链接时，图标旋转并且内容向下滑动。我设法让内容向下滑动，但我无法让图标在同一脚本中旋转。

这是脚本:

<script>
$(function(){
  $(".change_delivery_address").click(function(){
$(".spm").slideToggle();
  });  
});

这是de html:

<div class="change_delivery_address"><h6>Choose another delivery address<img src="images/layout-            img/menu-icons/arrow_carrot-right.png"></h6>

</div>

CSS:

.change_delivery_address h6{
cursor: pointer;
color: #3274f4;
margin-top: 20px;
    padding-top: 5px;
    padding-left: 20px;

}

.change_delivery_address h6:active{
background: none;
}

.spm {

display: none;
}

希望有人能帮我解决这个问题，谢谢。

Answer 1

看来您的问题是您没有在 click 函数中包含任何旋转。

包括JQueryRotate，一个允许旋转的小库，通过添加

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js">

然后您的脚本应该如下所示。因为我假设您希望它旋转然后再旋转回来，所以我添加了一个 bool 值来检查它旋转的方向并采取相应的行动，因为没有 rotateToggle:

var rotated = false;
$(".change_delivery_address").click(function(){
    $(".spm").slideToggle();
    if(rotated) {
        rotateAngle = -90;
    }
    else {
        rotateAngle = 90;
    }  
    $("img[src='images/layout-img/menu-icons/arrow_carrot-right.png']").rotate(rotateAngle)
});