当我们单击后退时，则单击事件前应打开

Question

我想在单击事件时翻转div，当我再次单击div时，它应该翻转回原始状态。但到目前为止，它仅适用于mouseleave事件，而我想对jquery的click事件进行操作。

为此，我尝试了此操作：-

$('.flip').click(function() {
  $(this).find('.card').addClass('flipped').mouseleave(function() {
    //$(this).removeClass('flipped');
  });
  return true;
});

body {
  background: #ccc;
}

.flip {
  -webkit-perspective: 800;
  width: 400px;
  height: 200px;
  position: relative;
  margin: 50px auto;
}

.flip .card.flipped {
  -webkit-transform: rotateY(-180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}

.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  z-index: 2;
  font-family: Georgia;
  font-size: 3em;
  text-align: center;
  line-height: 200px;
}

.flip .card .front {
  position: absolute;
  z-index: 1;
  background: black;
  color: white;
  cursor: pointer;
}

.flip .card .back {
  -webkit-transform: rotateY(-180deg);
  background: blue;
  background: white;
  color: black;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip">
  <div class="card">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
  </div>
</div>

它可以处理mouseleave事件，但我想执行click事件。

Answer 1

您可以使用toggleClass()代替添加/删除类。当您点击Dispatcher.Invoke(new Action(() => { //I want to compare if the listview item width is more than the GridProductSelected if (ProductSelected.ActualWidth > GridProductSelected.ActualWidth) { tipsProd.Visibility = Visibility.Visible; //A class to call animation from ResourceDictionary GestureAnimations.StartAnimation("AnimateGestureHorizontal", tipsSelected); DispatcherTimer Timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(5) }; Timer.Tick += (delegate (object s, EventArgs args) { Timer.IsEnabled = false; Timer.Stop(); tipsProd.Visibility = Visibility.Hidden; }); Timer.Start(); } }), DispatcherPriority.Loaded);

时，这将切换ActualWidth类的“开/关”

.flipped

.flip

 $('.flip').click(function() {
   $(this).find('.card').toggleClass('flipped')
 });

您可以通过检查卡的类是否为body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: 200px; position: relative; margin: 50px auto; } .flip .card.flipped { -webkit-transform: rotateY(-180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden; z-index: 2; font-family: Georgia; font-size: 3em; text-align: center; line-height: 200px; } .flip .card .front { position: absolute; z-index: 1; background: black; color: white; cursor: pointer; } .flip .card .back { -webkit-transform: rotateY(-180deg); background: blue; background: white; color: black; cursor: pointer; }->删除，否则删除->添加它来复制此行为

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip">
  <div class="card">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
  </div>
</div>