javascript - 如何更改导致折叠/展开 div 的图像按钮

Question

如何更改导致 div 折叠/展开的图像按钮。

例如单击“+”将展开。在扩展的同时，“+”变成了“-”。同样，单击“-”将折叠 div，“+”将再次出现。

这是 fiddle

html:

  <div class="expandContent"><a><img id="arrow" src="http://s13.postimg.org/myy6y2uxv/plus.png"></a></div>

<div class="showMe" style="display:none">This content was hidden, but now shows up </div>

js:

 $('.expandContent').click(function(){
    $('.showMe').slideToggle('slow');
});

Answer 1

fiddle Demo

var div_show = $('.showMe'), //cache selectors
    arrow = $('#arrow');
$('.expandContent').click(function () {
    div_show.slideToggle('slow', function () { //slideToggle callback function -> when slideToggle  finishes.
        if ($(this).is(':visible')) { //if div is visible change image to minus 
            arrow.prop('src', 'http://www.a1registry.ca/en/images/minus.png');
        } else { // if div hidden change image to plus
            arrow.prop('src', 'http://s13.postimg.org/myy6y2uxv/plus.png');
        }
    });
});

---

引用资料

.slideToggle()

.prop()

.is()

:visible