在外部點擊隱藏按鈕

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(); 
     } 
    } 
}) 

您可能還需要檢查的目標是菜單本身，從而點擊時不會隱藏自身。