オンクリックで画像を変更した後、2回目のクリックで戻す

Question

クリックすると下向き矢印画像（.triggerクラス）を上向き矢印の画像に変更できますか？基本的には、.triggerのクラスを持つ画像を使用して.linksのdivを切り替えると、.linksが表示されたとき（滑り落ちたとき）、矢印を下にせずに上にして、ユーザーがクリックできることを示しますもう一度.linksを隠すために。ユーザーがUP矢印をクリックしてリンクを非表示にすると、もう一度下矢印に変更します。これは単純なタスクの説明がたくさんありますが、うまくいけば皆さんは私が求めていることを理解しています。トグルコード：

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