为什么我的点击处理程序在点击2次后失败？

Question

我的目标是上下切换两个图像。

这是我拥有的，它的工作原理部分。

如果这是OK，然后我失去了什么？
当我点击它停止工作两次....

这里是我的代码：

$(document).ready(function() { 
     $(".collapse").click(function() { 
      $("#box").hide(); 
      $(".collapse").replaceWith('<span class="open"></span>'); 
      $(".open").click(function() { 
       $("#box").show(); 
       $(".open").replaceWith('<span class="collapse"></span>'); 
      }); 
     }); 
    }); 

Answer 1

好吧......而不是你replaceWith只是做：

$(".open").removeClass("open").addClass("collapse"); 
//and 
$(".collapse").removeClass("collapse").addClass("open"); 

而变化.click（使用on(...)）：

$(document).on("click", ".collapse", function() { 
    .... 
}); 

---

把所有在一起：

$(document).ready(function() { 
    $(document).on("click", ".collapse, .open", function() { 
     $("#box").toggle(); 
     $(this).toggleClass("open", "collapse"); //toggles btw the two classes 
    }); 
}); 

Answer 2

侑被封闭两个click事件。分开它。试试下面的代码

$(document).ready(function() { 
      $(".collapse").click(function() { 
       $("#box").hide(); 
       $(this).removeClass('collapse'); 
         $(this).addClass('open'); 
      }); 
      $(".open").click(function() { 
       $("#box").show(); 
       $(this).removeClass('open'); 
         $(this).addClass('collapse'); 
      }); 
     }); 

Answer 3

我建议你使用的CSS 代替。

的jQuery：

$(".collapse").toggleClass('closed') 

的CSS：

.collapse { 
    background: url(image/arrow-up.jpg); 
} 
.collapse.closed { 
    background: url(image/arrow-down.jpg); 
} 
.collapse > #box { 
    display: block; 
} 
.collapse.closed > #box { 
    display: none; 
} 

希望这有助于。