首页 文章

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

提问于
浏览 次
0

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

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

2 回答

  • 0

    也许是这样的：

    $(".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

    回复于
  • 1

    这是使用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/

    回复于

相关问题