如何使用jQuery旋转无序列表中的项目符号图像

Question

Ok, I have totally retooled my approach (thank you superUntitled) and am making progress... I have an unordered list that users can toggle and my only remaining issue is that when I expand some items, and then click "Show All Cities" not all of the arrows go in the same direction. All the arrows change, including the ones on the list items already expanded. Any suggestions on how to resolve this?

Here's my new Javascript:

   $("#Names .airports").hide();
   $("#Names .close").hide();

   $('#Expand').click(function(){
        $('h2').children(".close").toggle();
        $('h2').children(".arrow-down").toggle();
           if($(this).text() == 'Hide All Cities')
           {
               $(this).text('Show All Cities');
               $('#Names .airports').slideUp('fast');
           }
           else
           {
               $(this).text('Hide All Cities');
               $('#Names .airports').slideDown('fast');
           }
           });

    $("#Names h2").addClass("state").click(function() {  
    $(this).parent().children(".airports").slideToggle('fast')
    $(this).children(".close").toggle();
    $(this).children(".arrow-down").toggle();

Here's the fiddle illustrating the remaining problem: http://jsfiddle.net/d3pxx8ds/127/

Thanks in advance

---

Here's my old JavaScript (reference only now):

    $(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');});
    $('.stateNames ul').hide();
    $('.stateNames li').click(function(e) {
        e.stopPropagation();
        $(this).find('ul').toggle(); 
        var value = 0
        $(".arrow").rotate({ 
            bind: 
            { 
                click: function(){
                   value +=180;
                $(this).rotate(value)
                }
            } 
        }); 
    });

Answer 1

All i did was replace the order, i moved the .rotate to happen before the .toggle functions this would read the rotate first and subsequently do the toggle function thus setting the variable to 180 instead of waiting for the toggle to start, not allowing the variable to be set

$(function() {
    $('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();

var value = 0

$(".arrow").rotate({
    bind : {
        click : function() {
            value += 180;
            $(this).rotate(value)
        }
    }
});

$('.stateNames li').click(function(e) {
    e.stopPropagation();
    $(this).find('ul').toggle();

}); 

Answer 2

    $(function() {
    $('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});

$('.stateNames ul').hide();

var value = 0
$(".arrow").rotate({ 
    bind: 
     { 
        click: function(){

            value +=180;
        $(this).rotate(value)
        if (value==180){
            value=360;
        }
            else{
              value=180;
            }
        }
     } 
}); 

$('.stateNames li').click(function(e) {
    e.stopPropagation();
    $(this).find('ul').toggle(); 
});

I added the if statement and it works for one full go around but on the next toggle the arrow doesn't rotate hope that helps for now i will keep looking in to it