Jquery 单击可旋转背景图像

我想做的是让css中的图像在点击时旋转90度。我已经检查了多个网站和帖子，它们都接近我想要的，但似乎不正常，所以我想我只发布我自己的问题

这是我需要旋转url（../images./arrow.gif）的图像

基本上，我只是希望它在单击时向下旋转，因为我有一个列表也会向下旋转。我还想在再次单击时旋转回去

<div class="sidebox">
    <h1 class="collapsing">Current Projects</h1>
    <ul class="sidemenu">
        <li><a href="index.html" class="top">Website</a></li>
        <li><a href="#Paper">Technical Reporting Paper</a></li>
        <li><a href="#Calander">Build Calander for Site</a></li>
        <!-- <li><a href="">Develop App</a></li> -->
     </ul>
</div>

当前项目

有人知道如何使用Jquery实现这一点吗？还是一定要用其他方式

---

编辑：我想我的主要问题是如何使用jquery访问该图像并对其进行更改？我尝试过更改我声明图像的位置（例如在html中），但这只会弄乱我想要的图像的外观。

尝试使用jQuery插件，例如jqueryrotate。

而不是旋转背景图像，试试这个

$(document).ready(function(){
        $('.menu-category-title').click(function(){
            var elem = $('#menu-'+$(this).attr('hook')),
                arrow = $(this).children('.menu-title-arrow')

            if (!elem.is(':visible'))  {
                arrow.rotate({animateTo:90});
            } else {
                arrow.rotate({animateTo:90});
            }
            elem.fadeToggle('slow', function() {
            });

        return false;
    });
});

您将看到

<div class="menu-category-title" hook="01">TITLE 01
        <div class="menu-title-arrow" style="float: right;">↓</div>
    </div>

    <div class="menu-food-wrap" id="menu-01">
        test
    </div>

    <div class="menu-category-title" hook="02">TITLE 02
        <div class="menu-title-arrow" style="float: right;">↓</div>
    </div>

    <div class="menu-food-wrap" id="menu-02">
        test
    </div>

    <div class="menu-category-title" hook="03">TITLE 03
        <div class="menu-title-arrow" style="float: right;">↓</div>
    </div>

    <div class="menu-food-wrap" id="menu-03">
        test
    </div>

    <div class="menu-category-title" hook="04">TITLE 04
        <div class="menu-title-arrow" style="float: right;">↓</div>
    </div>

    <div class="menu-food-wrap" id="menu-04">
        test
    </div>

---

我希望这将有助于您考虑……：）

这将非常好，但我不确定如何首先访问该图像，以便在其上使用.rotate（）。如果这是您的图像：../images./arrow.gif，只需导入插件，然后使用带有任何id的标记（例如说“arrow”）将其添加到您的菜单中即可。然后，只需调用：

$（“#箭头”）.rotate（{bind:{click:function（）{$（this）.rotate（{angle:0，animateTo:180，easing:$.easing.easeInOutExpo}}）看看我在回答中提供的链接中的例子，我想我可能不得不把它放在一个img标记中，起初我试图不这样做，因为我喜欢它当时的样子，我只是想看看没有img标记是否可能。花了一点css使它看起来正确，但最终一切都解决了。谢谢
<div class="menu-category-title" hook="01">TITLE 01
        <div class="menu-title-arrow" style="float: right;">↓</div>
    </div>

    <div class="menu-food-wrap" id="menu-01">
        test
    </div>

    <div class="menu-category-title" hook="02">TITLE 02
        <div class="menu-title-arrow" style="float: right;">↓</div>
    </div>

    <div class="menu-food-wrap" id="menu-02">
        test
    </div>

    <div class="menu-category-title" hook="03">TITLE 03
        <div class="menu-title-arrow" style="float: right;">↓</div>
    </div>

    <div class="menu-food-wrap" id="menu-03">
        test
    </div>

    <div class="menu-category-title" hook="04">TITLE 04
        <div class="menu-title-arrow" style="float: right;">↓</div>
    </div>

    <div class="menu-food-wrap" id="menu-04">
        test
    </div>

.menu-category-title {
    position: relative;
    height: 70px;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 20px;
    border-bottom: 1px solid black;
    cursor: pointer;
}

.menu-food-wrap {
    position: relative;
    margin-top: 25px;
    padding-bottom: 45px;
    text-transform: uppercase;
    font-size: 12px; line-height: 15px;
    border-bottom: 1px solid black;
    display: none;
}