在外部点击隐藏按钮

Question

我不确定如何做到这一点，因为我是新手。当点击按钮.dropB时，我需要一个下拉菜单.dmenu，并且只要按钮在点击按钮外部的任何地方，就需要这个.dmenu到hide。

$('.dropB').click(function(){ 
     $('.dmenu').toggle(); 
}) 

但是，这并不让.dropB以外的任何位置单击时隐藏。 请任何帮助，将不胜感激。

Answer 1

您可以使用：

$('.dropB').click(function (e) { 
    e.stopPropagation(); 
    $('.dmenu').toggle(); 
}) 

$(document).click(function (e) { 
    if (!$(e.target).is('.dmenu')) { 
     $('.dmenu').hide(); 
    } 
}) 

Fiddle Demo

Answer 2

使用委托来处理对文档的点击。检查目标，如果它匹配您的按钮，然后toggle菜单。如果不是，那么hide菜单。

演示：http://jsfiddle.net/abhitalks/ztxa2/

$(document).on("click", function(e) { 
    var $target = $(e.target); 
    if ($target.hasClass("dropB")) { 
     $('.dmenu').toggle(); 
    } else { 
     if (! $target.hasClass("dmenu")) { 
      $('.dmenu').hide(); 
     } 
    } 
}) 

您可能还需要检查的目标是菜单本身，从而点击时不会隐藏自身。