Измените изображение по щелчку, но затем измените его снова при втором щелчке - PullRequest
Новая
       1

Измените изображение по щелчку, но затем измените его снова при втором щелчке

0 голосов
/ 10 марта 2012

Можно ли изменить изображение стрелки вниз (класс .trigger) на изображение стрелки вверх при нажатии? По сути, я использую изображение с классом .trigger, чтобы переключать div для .links, и когда .links открывается (скользит вниз), я хочу, чтобы стрелка была обращена вверх, а не вниз, чтобы показать, что пользователи могут щелкнуть по ней снова, чтобы скрыть .links снова. Как только пользователь скрывает ссылки, нажимая стрелку ВВЕРХ, я хочу, чтобы они снова сменились на стрелку вниз. Это простое объяснение для простой задачи, но, надеюсь, вы, ребята, понимаете, о чем я спрашиваю. Код переключения: 

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

Ответы [ 2 ]

1 голос
/ 10 марта 2012

Может быть, что-то вроде этого: 

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

0 голосов
/ 10 марта 2012

Вот простой способ перевернуть 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/

...