使用fadeToggle點擊外部來關閉div

Question

我正在使用fadeToggle來打開/關閉div。如何通過點擊外面的任何地方來關閉div？

我已經試過如下：

var dropDown = jQuery('.dropdown-menu'); 

jQuery('.menu-nav').click(function() { 
    dropDown.fadeToggle('fast'); 
}); 

jQuery('div:not(.menu-nav, .dropdown-menu)').click(function() { 
    dropDown.fadeOut('fast'); 
}); 

會發生什麼事是，div打開並立即關閉。這是甚至可能與fadeToggle？

Answer 1

將事件處理程序附加到document上的click事件。點擊發生時，請檢查target以確定是否點擊了.dropdown-menu或.menu-nav。如果不是，則隱藏菜單。

var dropDown = jQuery('.dropdown-menu'); 

jQuery('.menu-nav').click(
    function (e) { 
     dropDown.fadeToggle('fast'); 
     e.preventDefault(); 
    } 
); 

jQuery('div:not(.menu-nav, .dropdown-menu)').click(
    function (e) { 
     dropDown.fadeOut('fast'); 
     e.preventDefault(); 
    } 
); 

$(document).on("click", function(e){ 
    var $target = $(e.target); 
    if(!$target.is(".menu-nav") && !$target.is(".dropdown-menu")){ 
     dropDown.fadeOut('fast'); 
    } 
}); 

工作實例：http://jsfiddle.net/UJNd5/

Answer 2

這一個相當普遍的要求。要綁定一個click事件的文件，然後看看是否有點擊事件的target是你的菜單裏面還是不行，在這種情況下使用.closest()：

var dropDown = jQuery('.dropdown-menu'); 

// Show the menu 
jQuery('.menu-nav').click(function() { 
    dropDown.fadeIn('fast'); 
}); 

// Hide the menu 
jQuery(document).click(function (e) { 
    if(!jQuery(e.target).closest('.menu-nav').length || !jQuery(e.target).hasClass('dropdown-menu') { 
     dropDown.fadeOut('fast'); 
    } 
});