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/

Answer 2

如何满足您的需求：http://jsfiddle.net/HMKXq/

动画演示的OR位：http://jsfiddle.net/HMKXq/2/

好来源：Rotate image on toggle with jQuery

希望它有助于:)

<强>码

$(document).ready(function () {
    $('.menu-category-title').click(function () {
        $('#menu-' + $(this).attr('hook')).fadeToggle('slow');
        $(this).children('.menu-title-arrow').toggleClass("rotate1 rotate2");

    });
});

<强> CSS

.menu-category-title {
    position: relative;
    height: 70px;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 20px;
    border-bottom: 1px solid black;
    cursor: pointer;
}
.menu-food-wrap {
    position: relative;
    margin-top: 25px;
    padding-bottom: 45px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 15px;
    border-bottom: 1px solid black;
    display: none;
}
.rotate1 {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
.rotate2 {
    -webkit-transform: rotate(-180deg) translate3d(0, 0, 0);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

Answer 3

在您的情况下不需要

return false，另外hook属性不是HTML属性，因此它无效。
改为使用data-hook属性。

的 FIDDLE DEMO

<div class="menu-category-title" data-hook="01">

比如：

$(document).ready(function () { $('.menu-category-title').click(function () { var dat = $(this).data('rotate'); $(this).data('rotate', !dat? 0 : 180); $('#menu-' + $(this).data('hook')).fadeToggle('slow'); $(this).children('.menu-title-arrow').rotate({animateTo: dat}); }); });

这样做会在点击时设置额外的data（rotate），而不是分别使用ternary operator ( ? : )设置为0 : 180，具体取决于var返回的布尔值/值dat。

Answer 4

关闭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/

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

4 个答案: