1

我有以下 jquery,单击 #block4 时,.maincontent 会显示。这首先工作正常,显示然后隐藏 div。在最初的前 2 次之后再次单击它后, .maincontent div 会显示然后立即消失。

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

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

有谁知道问题是什么?

4

4 回答 4

3

为什么不这样做呢?

$('#block4').click(function(){
   if ($(this).is(':visible')) {
       $(".maincontent").fadeOut();
   }
   else {
       $(".maincontent").delay(500).fadeIn();
   }
});
于 2013-07-31T12:53:11.843 回答
1

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

$('#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);
});
于 2013-07-31T12:54:55.563 回答
1

您可以使用切换)

$('#block4').click(function() {
  $(".maincontent").toggle("slow");
});
于 2013-07-31T12:56:11.150 回答
-1

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

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

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

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

这是一个示例小提琴

于 2013-07-31T13:01:40.953 回答