javascript - jquery onclick関数がすべきことをしていない

Question

#block4 をクリックすると、.maincontent が表示される次の jquery があります。これは最初はうまく機能し、div を表示してから非表示にします。最初の 2 回の後に再度クリックすると、.maincontent div が表示され、すぐに消えます。

$('#block4').click(function(){
   $(".maincontent").delay(500).fadeIn();
   $("#block4").click(hideIt)
});

function hideIt() {
   $(".maincontent").fadeOut();
};

誰が問題が何であるか知っていますか？

Answer 1

なぜこのようにしないのですか？

$('#block4').click(function(){
   if ($(this).is(':visible')) {
       $(".maincontent").fadeOut();
   }
   else {
       $(".maincontent").delay(500).fadeIn();
   }
});

Answer 2

You can use toggle)

$('#block4').click(function() {
  $(".maincontent").toggle("slow");
});

Answer 3

hideItをクリックするたびに添付しますblock4。そのため、表示しようとすると が複数回発生hideItしますmaincontent。

提供されたコードに基づいて、チェックアウトすることをお勧めしますjQuery.fadeToggle()

$('#block4').click(function(){
    $(".maincontent").fadeToggle(500);
});

これにより、クリックごとにフェードイン/アウトが交互に行われます。

サンプルのfiddleを次に示します。