jquery-animate - 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>

Answer 2

没有 .toggle animate 我认为您需要执行以下操作：

$("#contact_min").click(function(){
  var height = $("#contact_min").attr("height");
  if height!=28px
  {
   $("#contact_min").animate({
    height: "28px"
    }, 1500 );
  $(".arrow").html("▲");
  }
  else
  {
  $("#contact_min").animate({
    height: "300px"
    }, 1500);
  $(".arrow").html("▼")
});

Answer 3

删除点击功能，因为切换已经有一个交换点击事件。

所以它将是：

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