Jquery 引导4 |点击时翻转卡（）

CSS:active在鼠标向下时翻转我的卡。我需要的是用JQuery click（）替换mouseDown事件，以便我的卡保持翻转状态，直到我再次单击它

我用JQuery尝试了几个选项，但没有任何效果

这是正在工作的CSS（鼠标向下）

这是HTML

<div class="card mb-3  " style="border:0;"  >
<div class="flip-card mb-3 ">

  <div class="flip-card-inner"  >
  <div class="flip-card-front"> 
  <!--Card image-->
  <div class="view overlay">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
    <a href="#">
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>

  <!--Card content-->
  <div  class="card-body   " style="border:0; " >       
    <!--Title-->
    <h4 class="card-title">Card title 1</h4>
    <!--Text-->
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
      content.</p>
    <button class="btn btn-primary" id="btnflip1"  >Front</button>
  </div>


  </div>


  <div class="flip-card-back" >
  <!--Card image-->
  <div class="view overlay">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
    <a href="#">
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>

  <!--Card content-->
  <div  class="card-body   " style="border:0; " >   
    <!--Title-->
    <h4 class="card-title">Card title 2</h4>
    <!--Text-->
    <p class="card-text">This is the back</p>
    <button class="btn btn-primary" id="btnflip2" >Back</button>  
  </div>

  </div>

  </div>  
  </div>  
</div>   

卡片标题1
一些基于卡片标题的快速示例文本，构成了卡片的大部分内容
内容
正面
卡片标题2
这是背面
返回

我需要用JQuery在单击（）事件时翻转卡片。我无法使用MD，并且此库不适用于我：

---

非常感谢

我刚刚使用了一个名为“.flipped”的类，您以前使用的是：活动选择器

然后，我使用jquery在单击卡片时切换翻转的类

$（'.flip card'）。在（'click'）上，
函数（）{
$（this.toggleClass（'flipped'））
}
)

.flip卡{
背景色：透明；
透视图：1000px；
}
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
转变：转变0.6s；
变换样式：保留-3d；
盒子阴影：0 8px 10px 0 rgba（90,90,90,0.2）
}
.flip-card.flipped.flip-card内部{
变换：旋转（180度）；
}
.正面翻转卡片，.背面翻转卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.把卡片翻回去{
变换：旋转（180度）；
}

卡片标题1
一些基于卡片标题的快速示例文本，构成了卡片的大部分内容
内容
正面
卡片标题2
这是背面
返回

或者，您可以在前/后按钮上添加“flip card”类，并将jquery选择器更改为以该类为目标，而不是以整个卡为目标。

<div class="card mb-3  " style="border:0;"  >
<div class="flip-card mb-3 ">

  <div class="flip-card-inner"  >
  <div class="flip-card-front"> 
  <!--Card image-->
  <div class="view overlay">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
    <a href="#">
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>

  <!--Card content-->
  <div  class="card-body   " style="border:0; " >       
    <!--Title-->
    <h4 class="card-title">Card title 1</h4>
    <!--Text-->
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
      content.</p>
    <button class="btn btn-primary" id="btnflip1"  >Front</button>
  </div>


  </div>


  <div class="flip-card-back" >
  <!--Card image-->
  <div class="view overlay">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
    <a href="#">
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>

  <!--Card content-->
  <div  class="card-body   " style="border:0; " >   
    <!--Title-->
    <h4 class="card-title">Card title 2</h4>
    <!--Text-->
    <p class="card-text">This is the back</p>
    <button class="btn btn-primary" id="btnflip2" >Back</button>  
  </div>

  </div>

  </div>  
  </div>  
</div>