1

クリック機能でdivの回転を切り替えることができるかどうかを調べています。たとえば、メニューボタンをクリックすると矢印が下向きから上向きに回転し、もう一度クリックするとこれが逆になります(上向きから下向き)。

私はそれをより理解できるjsfiddleデモセットアップを持っています: http://jsfiddle.net/bf7Ke/1/
jQuery —</p> 

$(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 度のままです。この機能も切り替える方法はありますか？
私はそれを理解することはできません、どんな提案も大歓迎です!

4

4 に答える 4

2

矢印を回転する前に、要素が表示されているかどうかを確認する必要があると思います

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

于 2013-05-29T22:49:47.623 に答える
0

div を閉じるときは、div の角度を 0 に戻す必要があります。これを試して：

$(document).ready(function(){
        $('.menu-category-title').click(function(){
              var targetAngle = $('#menu-'+$(this).attr('hook')).is(":visible") ? 0 : 180;
              $('#menu-'+$(this).attr('hook')).fadeToggle('slow');
              $(this).children('.menu-title-arrow').rotate({animateTo:targetAngle});

        return false;
    });
});

更新された jsFiddle は次のとおりです。

http://jsfiddle.net/rFxJM/

于 2013-05-29T22:50:04.643 に答える