在點擊上更改圖像，但隨後再次將其更改回

是否可以在點擊時將向下箭頭圖像（.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

在點擊上更改圖像，但隨後再次將其更改回

回答

相關問題