Question

我有以下jquery，点击＃block4，.maincontent显示。这首先工作正常，显示然后隐藏div。一旦你在最初的前两次之后再次抓住它，.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);
});

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

以下是fiddle示例。

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

4 个答案: