1

我正在使用Quickflip 2创建多个“翻转面板”，它们都共享相同的包装类 .quickFlip

其中有两个“状态”，它们是 .blackPanel （显示为“onload”）和 .redPanel 是相反的......或备用“状态” - QuickFlip 通过简单的动画来翻转这些状态（显然这适用于 IE 8 > Safari、Firefox 和 Chrome……好东西？！）

我有一个问题：因为我要处理多个（最多 9 个）我想在选择一个新面板时自动关闭（或重置）所有打开的面板。

编码：

    $(function() {
    $('.quickFlip').quickFlip();
    $('.redPanel').on('mouseleave',function(){
 $('.quickFlip').quickFlipper( {}, 0 );
  });
});​

这是http://jsfiddle.net/sMYzS/152/上的一个示例

然而......在这个例子中，它在每个面板上运行动画（翻转），无论它们处于什么状态。

我确信答案在于将 .quickFlipper 函数应用于除活动（你能在 jQuery 中这么说吗？）类/区域之外的所有对象。对不起，如果我听起来完全迷路了。

我是 jquery 的新手，已经使用 .each / .mouseover 进行了调查，并添加了不同的函数，这些函数使用 javascript:onclick 来“隐藏”每个非活动状态......但我现在迷路了。经过 15 个小时的闲逛后，我决定来这里，多年来我发现了一个很棒的资源。如果你能指出我正确的方向——那就太好了。谢谢！

以下是一些我尝试修改以满足我的要求的类似技巧： jQuery Quick Flip switch back

Quickflip 2 插件 - 只翻转一次图像？

4

1 回答 1

1

这个小提琴解决了您遇到的问题：

在上面的代码中，这一行

$('.quickFlip').quickFlipper( {}, 0 );

作用于具有“quickFlip”类的所有元素 - 即所有面板。

默认情况下，插件会监视对带有“quickFlipCta”类的链接的点击，因此我为这些元素添加了另一个处理程序，在点击时将“翻转”类添加到包装器 div。

$('.quickFlipCta').click(function() {
    $(this).parents('.quickFlip').addClass('flipped');
});

现在不是用“quickFlip”类来取消翻转，我们可以用“flipped”类来寻找东西，一旦它被取消翻转，就删除它。

$('.redPanel').on('mouseleave', function() {
    $('.flipped').quickFlipper({}, 0);
    $('.flipped').removeClass('flipped');
});

但是，如果您希望面板保持翻转状态，直到您单击另一个面板，这里有一个 Fiddle 来代替：

这次翻转/取消翻转逻辑都在点击处理程序中 - 希望评论能清楚地说明那里发生了什么。

于 2012-10-17T10:25:25.727 回答