1

我已经在使用插件来处理 CSS3 属性。单击它时它可以工作，并旋转 45 度，但是当再次单击它以隐藏内容时，它不会向后旋转。关于如何使它工作的任何想法？

$("#faq dt").click(function() {
    $(this).next('dd').slideToggle('fast');
if ($(this).next('dd').is(':visible')) {
 $(this).children('span').transition({ rotate: '45deg' });
 }
else {
 $(this).children('span').transition({ rotate: '-45deg' });
 }
});

您可以在此处查看现场直播：http ://www.revival.tv/lastdays/

工作片段：

$("#faq dt").click(function() {
$(this).next('dd').slideToggle('fast', function() {
    if ($(this).is(':visible')) {
         $(this).prev('dt').children('span').transition({ rotate: '45deg' });
    } else {
         $(this).prev('dt').children('span').transition({ rotate: '0deg' });
    }
 });
});
4

4 回答 4

1

就像这样。我所知道的是，当您触发slideToggle时dd，dd在切换动画结束之前仍然可见。dd因此，您应该在动画之后作为回调函数判断是否可见。

文档在这里

$("#faq dt").click(function() {
    $(this).next('dd').slideToggle('fast', function() {
        if ($(this).is(':visible')) {
             alert('1');
        } else {
             alert('2');
        }
    });
});

编辑

有时，元素选择是一个问题。我只是将它们替换为alert('1') and alert('2'). 我希望你能抓住重点。

于 2012-08-28T00:56:22.227 回答
0

你为什么不把旋转放在一个类上，然后用javascript添加和删除这个类，让它来回滑动？

于 2012-08-28T00:51:02.053 回答
0

这是一个快速修复：

$("#faq dt").click(function() {
    $(this).next('dd').slideToggle('fast');


    if (!$(this).next('dd').hasClass('collapsed')) {
        $(this).children('span').transition({
            rotate: '45deg'
        });
        $(this).next('dd').addClass('collapsed');
    }
    else {
        $(this).children('span').transition({
            rotate: '0deg'
        });
        $(this).next('dd').removeClass('collapsed');
    }
});​

你可以看到它在这里工作：http: //jsfiddle.net/crisboot/6Aj9e/

于 2012-08-28T01:11:12.663 回答
-1

这是基本旋转功能的快速操作。实施我留给你:)

于 2012-08-28T00:42:01.783 回答