在点击上更改图像，但随后再次将其更改回

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

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

来源

2012-03-10 James Charless Dickinson

什么是你的HTML是什么样子？在哪里找到箭头图像？ '.trigger'元素的内部，还是（下一个或前一个）兄弟？ – 2012-03-10 16:32:39

您可以随时更改“”元素上的“src”属性... – Pointy 2012-03-10 16:34:06

什么箭头？是它的CSS图像或img标签...需要更多详细信息 – charlietfl 2012-03-10 16:34:49

也许是这样的：

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

来源

2012-03-10 16:40:01 adeneo

工作，谢谢。 – 2012-03-10 17:00:01

这里有一个简单的方法翻转使用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/

来源

2012-03-10 17:01:23 jholloman

在点击上更改图像，但随后再次将其更改回

回答

相关问题