問題描述

我正在嘗試確定是否可以在單擊功能上切換 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/

這篇關于jQuery:在點擊功能上切換旋轉 div的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！