Jquery quickflip-2多面板

我正在使用创建多个“翻转面板”，它们共享同一个包装器类。quickFlip

其中有两个“状态”，分别是.blackPanel（显示为“onload”）和.redPanel（显示为“onload”）。相反。。。或者另一个“状态”-QuickFlip通过一个简单的动画实现了翻转这些状态的魔力（显然，这可以在IE 8>Safari、Firefox和Chrome中工作……好东西？！）

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

守则：

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

下面是一个关于这一点的例子

然而。。。在本例中，它在每个面板上运行动画（翻转），无论它们处于何种状态

我确信答案在于将.quickFlipper函数应用于除活动（在jQuery中可以这样说吗？）类/区域之外的所有类/区域。对不起，如果我听上去完全不知所措

我是jquery新手，我研究了如何使用.each/.mouseover并添加使用javascript:onclick“隐藏”每个非活动状态的不同函数。。。但我现在迷路了。经过15个小时的黑客攻击，我决定来到这里，多年来我发现了一个非常棒的资源。如果你能给我指出正确的方向，那就太棒了。谢谢

以下是一些类似的黑客攻击，我尝试对其进行修改以满足我的要求：

---

此小提琴修复了您的问题：

在上面的代码中，这一行

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

使用“quickFlip”类作用于所有元素，即所有面板

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

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

现在，我们不必使用类“quickFlip”来解卷，而可以使用类“fliped”来查找内容，并在解卷后删除该类

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

但是，如果您希望面板在单击另一个面板之前保持翻转状态，则可以使用小提琴：

---

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

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

在上面的代码中，这一行

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

使用“quickFlip”类作用于所有元素，即所有面板

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

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

现在，我们不必使用类“quickFlip”来解卷，而可以使用类“fliped”来查找内容，并在解卷后删除该类

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

但是，如果您希望面板在单击另一个面板之前保持翻转状态，则可以使用小提琴：

---

这一次，翻转/取消翻转逻辑都在单击处理程序中-希望注释能够清楚地说明那里发生了什么。

太棒了。谢谢你给出了一个决定性的、信息丰富的、有启发性的回答。interwebs并不经常返回这样有价值的建议。伊恩——先生，你是一位传奇人物和绅士。太棒了。谢谢你给出了一个决定性的、信息丰富的、有启发性的回答。interwebs并不经常返回这样有价值的建议。伊恩——先生，你是一位传奇人物和绅士。