jQuery：在点击功能上切换旋转div [英] jQuery: Toggle rotate div on click function

问题描述

我试图弄清楚是否可以在点击功能上切换div的旋转，例如点击一个菜单按钮，将箭头从向下指向上方，再次点击会颠倒这个方向（从上到下）。


我有一个jsfiddle演示设置，它可以让它更有意义：< jQuery的 -

  $（document）.ready（function（）{
 $（'。menu-category-title'）。click （函数（）{
 $（'＃menu  - '+ $（this）.attr（'hook'））。fadeToggle（'slow'）; 
 $（this）.children（'。 （{animateTo：180}）; 
 
 return false; 
}）; 
}）; 
  

远远点击 .menu-category-title 淡入下面的相关内容，并将相应的箭头旋转180度。点击 .menu-category-title 再次淡出相关内容，但箭头保持180度。有没有反过来切换这个功能呢？
我无法弄清楚，任何建议将不胜感激！

解决方案

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

  $（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。 （{animateTo：180}）; 
} else {
 arrow.rotate（{animateTo：360}）; 
} 
 elem.fadeToggle（'slow'，function（ ）{
}）; 
 
 return false; 
}）; 
}）; 
  

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

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

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/

这篇关于jQuery：在点击功能上切换旋转div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！