javascript - jquery onclick函数没有做它应该做的事情

Question

我有以下 jquery，单击 #block4 时，.maincontent 会显示。这首先工作正常，显示然后隐藏 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

你不应该这样做。最好设置一个类或您可能需要的任何标志：

$('#block4').click(function(){
 var $cont=$(".maincontent");
    if(!$cont.hasClass('visible'))
        $cont.addClass('visible').delay(500).fadeIn();
    else
        $cont.removeClass('visible').fadeOut();
});

至于您的解决方案，请尝试禁用上一个事件：

$("#block4").off('click').click(hideIt);

或更好地使用.one虽然我更喜欢class解决方案：

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

Answer 3

您可以使用切换）

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

Answer 4

hideIt每次单击时都附加block4。因此，hideIt当您尝试显示maincontent.

根据您提供的代码，我建议您检查一下jQuery.fadeToggle()

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

这将在每次点击淡入/淡出之间交替。

这是一个示例小提琴。