Question

我有一个我想要隐藏的范围，并在点击时显示另一个范围。当我显示第二个跨度时，它将显示效果。

问题是，它只适用于第一次点击。不在第二个。（第三个工作正常，但不是第四个等等）。

unclick之后

再次点击它将无法显示动画。

有什么不对？为什么在取消点击后无法再看到动画并再次点击？

JS

$(function() {
 $( document ).on( "click", "#click", function() {
  $(this).hide();
  $('#unclick').show();

  $('#unclick').toggleClass("l_toggle"); //work only first time?

 });


 $( document ).on( "click", "#unclick", function() {
  $(this).hide();
  $('#click').show();
 });





});

https://jsfiddle.net/b7c34kgv/2/

Answer 1

隐藏l_toggle：

时删除unclick课程

$( document ).on( "click", "#unclick", function() {
  $(this).hide();
  // add this
  $('#unclick').removeClass("l_toggle");
  $('#click').show();
 });

Answer 2

将$('#unclick').toggleClass("l_toggle");添加到#unclick

的点击处理程序中

$(function() {
 $( document ).on( "click", "#click", function() {
  $(this).hide();
  $('#unclick').show();

   $('#unclick').toggleClass("l_toggle");

 });


 $( document ).on( "click", "#unclick", function() {
  $(this).hide();
  $('#click').show();
  $('#unclick').toggleClass("l_toggle"); // add this
 });





});

＆＃13;

$(function() {
 $( document ).on( "click", "#click", function() {
  $(this).hide();
  $('#unclick').show();
  
   $('#unclick').toggleClass("l_toggle");
  
 });


 $( document ).on( "click", "#unclick", function() {
  $(this).hide();
  $('#click').show();
  $('#unclick').toggleClass("l_toggle"); // add this
 });





});

＆＃13;

#unclick img{
  width:30px;
}

#unclick{
  display:none;
}

.l_toggle img{
  animation-name: spin; 
  animation-duration: 1s;
}
@keyframes spin { 
 25% { transform: scale(1.2); }
 33% { transform:rotate(35deg); } 
 66% { transform:rotate(-35deg); }
 100% { transform:rotate(0deg); }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span id=click>click</span>

<span id=unclick><img src=http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png>unclick</span>

＆＃13;

show（）之后切换不在第二次工作

2 个答案: