jQuery:在点击功能上切换旋转 div

2022-01-16 00:00:00 rotation jquery html

我正在尝试确定是否可以在单击功能上切换 div 的旋转，例如单击菜单按钮可将箭头从向下旋转到向上，再次单击将反转(从上到下).

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

I'm trying to work out if it's possible to toggle the rotation of a div on a click function, e.g. Clicking on a menu button rotates the arrow from pointing downwards to upwards and clicking again will reverse this (upwards to downwards).

I have a jsfiddle demo setup which will make more sense of it: 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 度.无论如何也可以切换此功能?
我无法弄清楚，任何建议将不胜感激！

Thus far clicking on .menu-category-title fades in the relevant content below and rotates the corresponding arrow by 180 degrees. Clicking .menu-category-title again fades out the relevant content but the arrow stays at 180 degrees. Is there anyway to toggle this function also?
I can't figure it out, any suggestions would be greatly appreciated!

推荐答案

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

Think you should check if element is visible or not before arrow rotation

$(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/

相关文章