Selecting single user clicked img in jQuery

Question

I have an accordion menu that I am trying to get images to switch from plus to minus when the accordion is activated. Currently I can only get all images to change to a minus when anything is clicked. There are already bg images on the links and I really dont want to go that route..

$(function() {

$('#menu ul').hide();
$('#menu > li').has('ul').children('a').addClass('disabled');
$('#menu').find('.disabled:last').addClass('lower');            //****=====will only add rounded corners to last menu item if it has a sub-menu=====****//
$('#menu').find('a:first').addClass('upper');
$('#menu > li').has('ul').children('a.disabled').click(function() {
    if ( $(this).next('ul').is(':visible')) {
        return false;
    } else {
        if ( $(this).hasClass('lower')) {
            $(this).removeClass('lower');
            $(this).parent().find('li > a:last').addClass('lower');
        } else {
            $(this).find('li > a:last').removeClass('lower');
            $('#menu ul:visible').slideUp('medium', function() {
                $('#menu').find('.disabled:last').addClass('lower');
            });
        }
        $('#menu ul:visible').slideUp('medium', function() {
            $('#menu:visible').find('img.top').attr('src','images/menu-dropdown.png')});
        $(this).next('ul:hidden').slideDown('medium', function() {
            $('#menu:hidden').find('img.top').attr('src','images/menu-minus.png')});
    }
}); 
$("a.disabled").live("click", function() {
    return false;
});

});

there is the whole accordion now...

update:

$('#menu ul:visible').slideUp(400);
        $(this).next('ul:hidden').slideDown(400);
            $(this).parent().find('img.top').attr('src','images/menu-minus.png');
    }

Changing it to that, gets them to change independently. However I still can not get them to change back to the original img placing code where I thought it should go.

Update again: here is the menu HTML...

<ul id="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Style Guide</a></li>
        <li><a href="#">Graphics <img class="top" src="images/menu-dropdown.png" alt="Signifies drop down" width="15" height="15" /></a>
            <ul>
                <li><a href="#">Templates</a></li>
                <li><a href="#">Icons</a></li>
                <li><a href="#">Symbols</a></li>
            </ul></li>
        <li><a href="#">Best Practices<img class="top" src="images/menu-dropdown.png" alt="Signifies drop down" width="15" height="15" /></a>
            <ul>
                <li><a href="#">Guide</a></li>
            </ul></li>
        <li><a href="#">Marketing<img class="top" src="images/menu-dropdown.png" alt="Signifies drop down" width="15" height="15" /></a>
            <ul>
                <li><a href="#">Icons</a></li>
                <li><a href="#">Templates</a></li>
                <li><a href="#">Pages Templates</a></li>
                <li><a href="#">Template</a></li>
                <li><a href="#">Template</a></li>
            </ul></li>
    </ul>

Answer 1

The resolution appears to be just a small tweak to your slideUp and slideDown traversals. This should work for you:

$('#menu ul:visible').slideUp('medium', function() {
  $(this).prev().find('img.top').attr('src','images/menu-dropdown.png');
});

$(this).next('ul:hidden').slideDown('medium', function() {
  $(this).prev().find('img.top').attr('src','images/menu-minus.png');
});

Nothing too huge, you just need to find the sibling a tag that contains the image to rotate out.