0

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

这是我需要旋转 url(../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 中），但这只会弄乱我想要的外观。

4

2 回答 2

1

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

于 2013-10-29T04:58:43.097 回答
1

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

$(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;">↓&lt;/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;">↓&lt;/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;">↓&lt;/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;">↓&lt;/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;
}

我希望这会对你有所帮助... :)

于 2013-10-29T05:01:07.937 回答