Question

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

这是我需要旋转的图片网址（../ images./arrow.gif）

.collapsing {
background: #000 url(../images/arrow.gif) no-repeat 10px .7em;
font: bold 1.4em 'Trebuchet MS', Arial, Sans-serif;
padding: 7px 0 7px 35px;
color: #A0080D;
cursor: pointer;
}

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

<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中），但这只是弄乱了我想要的外观。

Answer 1

尝试使用jQuery插件，例如jqueryrotate https://code.google.com/p/jqueryrotate/。

Answer 2

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

$(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;
    });
});

你的HTML看起来像

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

的CSS

.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;
}

我希望这会帮助你... ...）

单击时旋转背景图像

2 个答案: