Изображение возвращается к первоисточнику OnClick? - PullRequest
Новая
       2

Изображение возвращается к первоисточнику OnClick?

0 голосов
/ 18 января 2012

У меня есть развёрнутая и свернутая настройка системы в jQuery / JavaScript. Как только вы нажмете на DIV, изображение, находящееся в DIV, изменит свое состояние. Но когда вы снова нажимаете на этот DIV, изображения не возвращаются в исходное состояние. Он застрял в своем альтернативном состоянии.

Примечание: у меня есть сценарий в нескольких экземплярах на одной странице для создания эффекта аккордеона, когда вы нажимаете на другой «ПУНКТ», изображение возвращается в исходное состояние ранее выбранного DIV.

Вот jsFiddle: http://jsfiddle.net/4Dtd8/

Большое спасибо!

Ответы [ 4 ]

2 голосов
/ 18 января 2012

Вы можете контролировать видимость содержимого, чтобы определить, какой значок должен отображаться.

http://jsfiddle.net/4Dtd8/7/

jQuery('.item .expandacc').click(function() {
    if (jQuery($(this).next('.contentacc').is(':visible')) {
        jQuery('.expandacc h1 img').attr('src', 'http://www.novell.com/documentation/extend52/Docs/help/exteNd/books/GTRImages/expandIcon.png');
    }
    else {
        jQuery(this).find('img').attr('src', 'http://www.jornal.us/icons/expandIcon.jpg');
    }
    jQuery('.item .expandacc').not(this).siblings('.contentacc').slideUp('normal');
    jQuery(this).siblings('.contentacc').slideToggle('normal');
});
1 голос
/ 18 января 2012

Используйте css для размещения изображения на фоне тега h1. Затем вы можете просто переключить класс элемента с .open .closed на и позволить css обработать изменение изображения. 

jQuery('.item .expandacc').click(function() {
    jQuery('.item .expandacc').not(this).removeClass("open").addClass("closed")
        .siblings('.contentacc').slideUp('normal');
    jQuery(this).next('.contentacc').slideToggle('normal');
    jQuery( this ).toggleClass("closed").toggleClass("open");
});

http://jsfiddle.net/petersendidit/4Dtd8/9/

1 голос
/ 18 января 2012

Я добавил пользовательский атрибут isExpanded для тега изображения, чтобы сохранить его, если он развернут или свернут, и проверил значение, чтобы найти его состояние.

ДЕМО здесь

jQuery ('. Item .expandacc'). Click (function () {
JQuery (это) .siblings ( 'contentacc.) slideToggle ( «нормальный');. 

    var $img = jQuery(this).find('img');
    var isExpanded = $img.attr('isExpanded');

    // For some browsers, `isExpanded` is undefined; for others,
    // `isExpanded` is false.  Check for both.
    if (typeof isExpanded === 'undefined' || 
            isExpanded === false || 
                 isExpanded == 'true') {
        $img.attr('src', 'http://www.jornal.us/icons/expandIcon.jpg');

        $img.attr('isExpanded', 'false');
    } else {
        $img.attr('src', 'http://www.novell.com/documentation/extend52/Docs/help/exteNd/books/GTRImages/expandIcon.png');

        $img.attr('isExpanded', 'true');
    }
1 голос
/ 18 января 2012

Причина, по которой он застрял в альтернативном состоянии, заключается в следующей строке: 

jQuery(this).find('img').attr('src','http://www.jornal.us/icons/expandIcon.jpg');

Независимо от того, в каком состоянии он должен находиться , это последний код, который влияет на источник изображения.Таким образом, источник всегда установлен на то, что указано в этой строке.

...