0

次の 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>
4

3 に答える 3

5

それは何もしません。クリックを処理するために別のイベントをバインドします。もう一度クリックすると、何かが起こるのがわかりますが、その後、さらに別のイベントがバインドされます。その後、クリックごとに反対のことを行う複数のハンドラーが作成され、クリックごとにさらに多くのハンドラーがバインドされます。

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>
于 2013-01-10T08:37:45.300 に答える
1

.toggle animateはありません。次のようなことをする必要があると思います：

$("#contact_min").click(function(){
  var height = $("#contact_min").attr("height");
  if height!=28px
  {
   $("#contact_min").animate({
    height: "28px"
    }, 1500 );
  $(".arrow").html("&#x25B2;");
  }
  else
  {
  $("#contact_min").animate({
    height: "300px"
    }, 1500);
  $(".arrow").html("&#x25bc;")
});
于 2013-01-10T08:39:35.460 に答える
0

トグルにはすでに交換クリックイベントがあるため、クリック機能を削除します。

したがって、次のようになります。

<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>
于 2013-01-10T08:39:51.167 に答える