Question

好的，我完全改变了我的方法（谢谢superUntitled）并且正在取得进展......我有一个无序列表，用户可以切换，我唯一剩下的问题是，当我展开一些项目，然后点击＆＃ 34;显示所有城市＆＃34;并非所有箭头都朝同一方向发展。所有箭头都会更改，包括已展开的列表项目中的箭头。有关如何解决此问题的任何建议吗？

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

Answer 1

我所做的只是替换顺序，我将.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();

});

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

我添加了if语句，它适用于一个完整的转换，但在下一个切换箭头不旋转希望有助于现在我会继续查看它

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

2 个答案: