jQuery切换和动画不工作

Question

以下jQuery代码有什么问题？

<script type="text/javascript">
  $("#contact_min").click(function(){
    $("#contact_min").toggle(function(){
      $("#contact_min").animate({
        height: "300px"
      }, 1500 );
    $(".arrow").html("&#x25bc;")}
    function(){
      $("#contact_min").animate({height: "28px"}, 1500 );
      $(".arrow").html("&#x25B2;")
    })});
</script>

当我点击contact_min div时它什么也没做.

HTML:

<div id="contact_min">
  <span class="arrow">&#x25B2;</span>
  <span class="text">foobar</span>
</div>

Answer 1

它什么都不做.它绑定了另一个事件来处理点击.当你再次点击它时你会看到发生的事情,但它会绑定另一个事件.之后,每次点击都会有多个处理程序执行相反的操作,每次点击都会绑定更多的处理程序.

只需删除click方法调用,该toggle方法就会为点击绑定一个事件:

<script type="text/javascript">
$("#contact_min").toggle(function(){
  $("#contact_min").animate({
    height: "300px"
  }, 1500 );
  $(".arrow").html("&#x25bc;")
},
function(){
  $("#contact_min").animate({
    height: "28px"
  }, 1500 );
  $(".arrow").html("&#x25B2;")
});
</script>