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">

然后你的脚本应该是这样的。因为我假设您希望它旋转然后向后旋转，我添加一个布尔值来检查它旋转的方式并采取相应的行动，因为没有{{1} }：

rotateToggle

Answer 2

除了额外的jQuery库，您还可以将CSS类应用于图像以旋转图像。您将使用此处描述的transform属性http://www.w3schools.com/cssref/css3_pr_transform.asp。此外，您还可以通过CSS应用转换以动画图标转动。这里的好处是没有额外的插件，但仅在支持HTML5的浏览器中支持，所以如果你在IE8中遇到问题。

我不知道哪种方法最适合你，但我想抛出一个额外的选项。

同时旋转图标并切换内容

2 个答案: