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

How to rotate a bullet image in toggled unordered list with jQuery

本文关键字：列表 旋转 项目 图像 符号 无序 jQuery 何使用      更新时间：2023-09-26

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

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

以下是说明剩余问题的小提琴：http://jsfiddle.net/d3pxx8ds/127/

提前感谢

这是我的旧JavaScript（现在只参考）：

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

我所做的只是替换订单，我将.rate移动到.thoggle函数之前，这将首先读取rotate，然后执行toggle函数，从而将变量设置为180，而不是等待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)
        }
    }
});
$('.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(); 
});

我添加了if语句，它适用于一个完整的循环，但在下一次切换时，箭头不旋转。希望这对现在有帮助，我会继续关注它

相关文章：