Question

单击时，是否可以将向下箭头图像（.trigger类）更改为向上箭头的图像？基本上，我正在使用.trigger类的图像切换.links的div，当.links显示（向下滑动）时，我希望箭头朝上而不是向下以显示用户可以单击它再次隐藏.links。一旦用户通过单击向上箭头隐藏链接，我希望它再次更改为向下箭头。这是一个简单的任务解释，但希望你们明白我在问什么。切换代码：

$(".links").hide();
    $(".trigger").click(function() {
        $(this).next(".links").slideToggle(500);
    });

Answer 1

也许是这样的：

$(".links").hide();
    $(".trigger").click(function() {
        var BGpos = $(this).css('backgroundPosition');
        BGpos=BGpos=='0px -15px' ? '0 0' : '0px -15px';
        $(this).css('backgroundPosition', BGpos).next(".links").slideToggle(500);
    });

FIDDLE

或者你可以使用类，img元素或其他什么，这是另一个FIDDLE

Answer 2

这是使用css翻转的简单方法：

HTML：

<img id="arrow" src="http://www.cksinfo.com/clipart/signssymbols/arrows/arrow-3D-green-up.png">

JS：

$("#arrow").click( function() {
    $(this).toggleClass("flip-vertical");
});

的CSS：

.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv; /*IE*/
}

http://jsfiddle.net/DQPAx/

单击时更改图像，但在第二次单击时将其更改回来

2 个答案: