Javascript 如何使用jQuery在切换无序列表中旋转项目符号图像

好的，我已经完全调整了我的方法（谢谢你，超级无题），并且正在取得进展。。。我有一个无序列表，用户可以切换，我唯一剩下的问题是，当我展开一些项目，然后单击“显示所有城市”时，并非所有箭头都指向同一方向。所有箭头都会更改，包括已展开的列表项上的箭头。对如何解决这个问题有什么建议吗

以下是我的新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();

下面这把小提琴说明了剩下的问题：

提前谢谢

---

以下是我的旧JavaScript（仅限现在参考）：

$（函数（）{
$（'li.state'）。前缀（''；}）；
$（'.stateNames ul'）.hide（）；
$（'.stateNames li'）。单击（函数（e）{
e、 停止传播（）；
$（this.find（'ul'）.toggle（）；
var值=0
$（“.arrow”）。旋转（{
绑定：
{ 
单击：函数（）{
数值+=180；
$（此）。旋转（值）
}
} 
}); 
});

我所做的只是替换顺序，我将.rotate移动到.toggle函数之前。这将首先读取rotate，然后执行toggle函数，从而将变量设置为180，而不是等待切换开始，不允许设置变量

$(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();

}); 

$（函数（）{
$（'li.state'）。前缀（“”）；
});
$（'.stateNames ul'）.hide（）；
var值=0
$（“.arrow”）。旋转({
绑定：{
单击：函数（）{
数值+=180；
$（此）。旋转（值）
}
}
});
$（'.stateNames li'）。单击（函数（e）{
e、 停止传播（）；
$（this.find（'ul'）.toggle（）；
}); 

$（函数（）{
$（'li.state'）。前缀（“”）；
});
$（'.stateNames ul'）.hide（）；
var值=0
$（“.arrow”）。旋转（{
绑定：
{ 
单击：函数（）{
数值+=180；
$（此）。旋转（值）
如果（值==180）{
数值=360；
}
否则{
数值=180；
}
}
} 
}); 
$（'.stateNames li'）。单击（函数（e）{
e、 停止传播（）；
$（this.find（'ul'）.toggle（）；
});

---

我添加了if语句，它可以执行一次完整的循环，但在下一次切换时，箭头不会旋转。希望现在能有所帮助，我将继续查看它

您正在尝试将单击处理程序绑定到单击处理程序中，而单击处理程序需要直接单击箭头。更改类并使用css，不需要为thisHi charliefl使用插件，我最初在css中使用箭头作为列表样式的图像，但不知道如何使其旋转，您能建议我应该使用什么css命令吗？感谢谷歌css很容易rotate@charlietfl，我接受了你的建议，删除了插件并重新安装了javascript，但还有一个问题-你能看一下吗？谢谢你不应该完全重写这个问题…现在答案与最初的问题无关。相反，将问题回滚到原始状态并开始一个新问题。如果有帮助的话，你可以链接回这个。谢谢morogoyo，这让他们能够独立工作。但是，如果我展开第一项，然后尝试展开第二项，则第二项上的箭头不会立即转向。有没有关于如何解决这个问题的建议？以下是最新的小提琴：

$(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();

}); 

    $(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(); 
});