html - jQuery:点击功能时切换旋转div

Question

我正在尝试弄清楚是否可以在点击功能上切换 div 的旋转，例如单击菜单按钮会将箭头从向下旋转为向上，再次单击将反转此方向(向上到向下)。

我有一个 jsfiddle 演示设置，它将更有意义:http://jsfiddle.net/bf7Ke/1/
jQuery —

$(document).ready(function(){
        $('.menu-category-title').click(function(){
              $('#menu-'+$(this).attr('hook')).fadeToggle('slow');
              $(this).children('.menu-title-arrow').rotate({animateTo:180});

        return false;
    });
});

到目前为止，点击 .menu-category-title 会淡入下面的相关内容，并将相应的箭头旋转 180 度。再次点击 .menu-category-title 会淡出相关内容，但箭头仍保持 180 度。是否也可以切换此功能？
我不明白，任何建议将不胜感激!

Answer 1

认为您应该在箭头旋转之前检查元素是否可见

$(document).ready(function(){
    $('.menu-category-title').click(function(){
        var elem = $('#menu-'+$(this).attr('hook')),
            arrow = $(this).children('.menu-title-arrow')

        if (!elem.is(':visible'))  {
            arrow.rotate({animateTo:180});
        } else {
            arrow.rotate({animateTo:360});
        }
        elem.fadeToggle('slow', function() {
        });

    return false;
   });
});

http://jsfiddle.net/bf7Ke/2/