Javascript 单击单独的div时取消动画状态

我有一组卡片，以及一些当用户点击卡片时出现的CSS动画。我对结果很满意，但我有一个问题：如果我点击一张卡片，它会动画并显示额外的内容。如果我再次单击它，它将恢复为简化状态。如果我单击一张卡，然后单击另一张卡而不“关闭”上一张卡，它们都会保持动画。我怎样才能使它在我点击一张卡时，所有其他卡都恢复到未设置动画的状态？ HTML:

jQuery：

$(".card").click(function()
{
  $(this).toggleClass("transform-active");
  $(".disappear", this).toggleClass("appear");
});

---

工作演示：

只是一个想法：在将新类分配给单击的卡之前，迭代所有附加了类“card”的元素，然后重置它们的实际类

$(".card").click(function()
{
  // Reset all cards
  $(".card").each(function(){
     $(this).removeClass("transform-active");
     $(this).addClass("transform");

     // Reset their children with class "appear" as well
     $(this).children(".appear).each(function(){
       $(this).removeClass("appear");
       $(this).addClass("disappear");
     }
  });

  // Now set transform-active to the clicked card ...
  $(this).addClass("transform-active");
  $(this).removeClass("transform");

  // ... and all of its children with class "disappear" as well
  $(this).children(".disappear).each(function(){
     $(this).addClass("appear");
     $(this).removeClass("disappear");
  }
});

---

只需存储上一个，然后单击隐藏：

var previous;

$(".card").click(function(){
  if(previous) 
     $(previous).removeClass("transform-active");

  if(previous !== this) 
     $(this).addClass("transform-active");

  previous = this;
});

---

谢谢你@Jonas w，你的回答很好，但它让我对如何管理“.消失”类一无所知。我正在尝试使用您的解决方案，但目前在单击另一张卡时“.define”不会被重置。感谢您的回答，但这似乎不起作用。我将先前的代码片段放入您的现有代码中，现在应该可以正常工作了。如果不是的话，我不明白你的问题…我的错，它确实有效。我现在的问题是对卡片的内容应用相同的效果，“.demouse”元素。我仍然不确定我编辑的答案现在是否符合您的需要，但如果您阅读了评论，您应该能够调整解决方案以满足您的需要。也许下次你的问题会更清楚，以便更快地解决问题。；-）嗨，很抱歉回复晚了。不，你完全理解我要做的事情，只是我认为我不理解你的代码。你的评论帮了大忙，但它仍然有问题：atm，一旦点击一张卡，所有这些都会被触发，如果再次点击，它们仍然会被触发。我正在用它做实验。如果你有兴趣，你可以看看这里发生了什么：再次感谢你的帮助！

$(".card").click(function()
{
  // Reset all cards
  $(".card").each(function(){
     $(this).removeClass("transform-active");
     $(this).addClass("transform");

     // Reset their children with class "appear" as well
     $(this).children(".appear).each(function(){
       $(this).removeClass("appear");
       $(this).addClass("disappear");
     }
  });

  // Now set transform-active to the clicked card ...
  $(this).addClass("transform-active");
  $(this).removeClass("transform");

  // ... and all of its children with class "disappear" as well
  $(this).children(".disappear).each(function(){
     $(this).addClass("appear");
     $(this).removeClass("disappear");
  }
});

var previous;

$(".card").click(function(){
  if(previous) 
     $(previous).removeClass("transform-active");

  if(previous !== this) 
     $(this).addClass("transform-active");

  previous = this;
});