jQuery中slideToggle上的展开和折叠图标问题

Question

I am implementing a tree view with jQuery.

I use slideToggle() to expand-collapse sub trees and change the image showing its status(expand or collapse) in slideToggle method as a function and by using what Nick learn me at this question:

is there a toggleSrc method in jQuery?

but its image changing is not natural. I mean it shows collapse image when sub tree opens completely and shows expand image when sub tree closes completely. The expand changing is natural but the collapse not. I mean the collapse image should be shown when sub tree start to collapse not after it complete it.

Hope I could describe my mean clearly.

Is it possible to do what I mean?

Thank you in advance.

Answer 1

why don't you share what you got so far? anyway, you are toggling the images in the callback of slideToggle? which means after the animation..try to toggle it before the slideToggle, but this will also shows the expand image at the start of the animation.

What ur asking for is possible but requires you to write a condition

if(obj.is(':visible')) { // the sub-tree is expanded
    $img.toggleSrc(); // show image then toggle
    obj.slideToggle(function() {
        // your code WITHOUT toggleSrc
    });
} else {
    obj.slideToggle(function() {
        // your code WITH toggleSrc
    });
}