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 回答
2

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

或者这里的动画演示：http: //jsfiddle.net/HMKXq/2/

好的来源：使用 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);
}
于 2013-05-29T22:51:56.247 回答
1

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。

于 2013-05-29T22:49:13.970 回答
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 回答