jQuery关闭/切换div通过点击正文

在这个小jsFiddle http://jsfiddle.net/PcWjA/22/我试图做一个ul go显示：没有当有一个点击身体（或任何地方不是上的项目）和工作的第一个时间有一个点击身体。但在此之后，脚本似乎循环显示/隐藏ul闪存。jQuery关闭/切换div通过点击正文

来源

2012-08-08 Peter Boomsma

我不想听起来像一个混蛋，但答案你接受的是有点过于复杂 – 2012-08-08 00:40:40

我有另一个答案 http://jsfiddle.net/FfBzT/

jQuery(document).ready(function() { 
    jQuery('.hour_dropdown').hide() 
    $(window).click(function (event) { 
     if ($(event.target).hasClass("hour_dropdown") || 
      $(event.target).parents(".hour_dropdown").size() > 0 || 
      $(event.target).hasClass("more")){ 
       // do nothing.... 
      } else { 
        $('.hour_dropdown').fadeOut(200); 
      } 
    }); 
    jQuery('.more').click(function() { 
     //if ($('.hour_dropdown').css("display")=="none") { 
      $('.hour_dropdown').fadeToggle(200); 
     //} 
    }); 
});

来源

2012-08-08 00:33:12

我只是添加jsfiddle – 2012-08-08 00:38:44

谢谢，所以你的解决方案是使用大于0的大小。这非常聪明！ – 2012-08-08 00:39:59

问题是您正在重复注册body.click处理程序，并且从不删除它。 jQuery维护事件侦听器的列表，因此当您多次添加相同的点击处理程序时，它会针对每次点击执行多次。

我会定身单击处理一次，在事件的document.ready，并将它只是隐藏小时下拉如果当前可见的，是这样的：

jQuery('.more').click(function() { 
    if ($('.hour_dropdown').is(':hidden')) { 
     $('.hour_dropdown').fadeToggle(200); 
    } 
}); 

jQuery('body').click(function() { 
    if ($('.hour_dropdown').is(':visible')) { 
     $('.hour_dropdown').fadeOut(200); 
    } 
});

来源

2012-08-08 00:26:09

值得指出的是'span'中的'ul'是无效的HTML。修正版本：http://jsfiddle.net/PcWjA/25/ – Stecman 2012-08-08 00:29:31

简单地取消绑定体click事件这将解决您的问题。

jQuery(document).ready(function() { 
    jQuery('.hour_dropdown').hide() 

    jQuery('.more').click(function() { 
     if ($('.hour_dropdown').is(':hidden')) { 
      $('.hour_dropdown').fadeToggle(200); 
      $("body").unbind(); 

     } else { 
      $('body').click(function() { 
       $('.hour_dropdown').fadeOut(200); 
      }); 
     } 
    }); 

});

来源

2012-08-08 00:26:43

怎么样（希望这是正确的行为）：

jQuery(document).ready(function() { 

    var element = $('.hour_dropdown'); 
    element.hide(); 

    $('body').click(function(event) {   
     if (('more' == $(event.target).attr('class')) || (0 < $(event.target).parents('.more').length)) { 
      element.fadeIn(200);   
     } else { 
      element.fadeOut(200); 
     } 
    }); 
});

它检查点击的元素是否也正是一个与more类还是一个家长有这个类。它还将类.hour_dropdown中的元素存储在一个变量中，并减少了请求，并且它只有一个事件处理程序。 fiddle

来源

2012-08-08 00:33:01 insertusernamehere

我通常不结合这些类型的事件到身体的，因为它得到坚韧与事件冒泡。我建议做系统显示处理接近事件的固定覆盖：

http://jsfiddle.net/PcWjA/33/

jQuery(document).ready(function() { 
    jQuery('.hour_dropdown').hide() 

    $('.more').on('click', function() { 
     $('.hour_dropdown').fadeToggle(200); 
     $('#overlay').show(); 
    }); 

    $('#overlay').on('click', function() { 
     $('.closeable').fadeOut(); 
     $(this).hide(); 
    }); 
});

来源

2012-08-08 00:38:15

给一个ID，跨度是这样的：<span id="more" class="more"> 和修改您的JS代码：

jQuery(document).ready(function() { 
    jQuery('.hour_dropdown').hide() 

    jQuery('.more').click(function() { 
     if ($('.hour_dropdown').is(':hidden')) { 
      $('.hour_dropdown').fadeToggle(200); 
     } else { 
      $('body').click(function(event) { 
       if(event.target.id!="more") 

       $('.hour_dropdown').fadeOut(200); 
      }); 
     } 
    }); 
});

您更新的提琴现在看起来像这样：Demo

来源

2012-08-08 00:54:02

jQuery关闭/切换div通过点击正文

回答

相关问题