jquery - Bootstrap 4 |单击时翻转卡片()

Question

CSS :active 在 mouseDown 时翻转我的卡片。我需要的是用 JQuery click() 替换 mouseDown 事件，这样我的卡片就会保持翻转状态，直到我再次单击它。

我尝试了一些 JQuery 选项，但没有任何效果。

这是工作的CSS(鼠标按下时)

.flip-card {
  background-color: transparent; 
  perspective: 1000px;  
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 8px 10px 0 rgba(90,90,90,0.2)
}


.flip-card:active .flip-card-inner {   
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}



.flip-card-back {

  transform: rotateY(180deg);
}

这是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>   

我需要在 click() 事件上使用 JQuery 来翻转卡片。我无法使用 MD，并且这个库对我不起作用:https://nnattawat.github.io/flip/

非常感谢

Answer 1

我刚刚使用了一个名为“.flipped”的类，您之前有 :active 选择器。

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

$('.flip-card').on('click', 
  function(){
    $(this).toggleClass('flipped')
  }
)

.flip-card {
  background-color: transparent; 
  perspective: 1000px;  
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 8px 10px 0 rgba(90,90,90,0.2)
}


.flip-card.flipped .flip-card-inner {   
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}



.flip-card-back {

  transform: rotateY(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>